如何使用 d3.axis.tickFormat 拆分图形的 y 轴？答案

【问题标题】：How do I split the y-axis of the graph using d3.axis.tickFormat?如何使用 d3.axis.tickFormat 拆分图形的 y 轴？
【发布时间】：2014-09-12 18:22:25
【问题描述】：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: black;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;

}

    #legend {
        margin-left:220px;
    }
</style>
<div id="legend">
    <h3>Cholera No Of Deaths & Cases</h3>
 
<body>
<script src="http://d3js.org/d3.v3.js"></script>
    <script src="legend.js"></script>
<script>

    var margin = { top: 30, right: 40, bottom: 30, left: 50 },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y").parse;

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left").ticks(5);

    var line = d3.svg.line()
        .x(function (d) { return x(d.year); })
        .y(function (d) { return y(d.value); });

    var line2 = d3.svg.line()
    .x(function (d) { return x(d.year); })
    .y(function (d) { return y(d.value2); });

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json("country.json", function (error, data) {
        data.forEach(function (d) {
            d.year = parseDate(d.year.toString());
            d.value = +d.value;
            d.value2 = +d.value2;
        });

    

        x.domain(d3.extent(data, function (d) { return d.year; }));
        y.domain([0, d3.max(data, function (d) { return Math.max(d.value, d.value2); })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)

        svg.append("text")      // text label for the x axis
          .attr("x", 265)
          .attr("y", 240)
          .style("text-anchor", "middle")
          .text("Years");

             

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Number Of Cholera Cases");

        svg.append("path")
            .datum(data)
            .attr("class", "line")
             .style("stroke", "red")
            .attr("d", line(data));

        svg.append("path")
            .datum(data)
            .attr("class", "line")
           
            .attr("d", line2(data));

        legend = svg.append("g")
      .attr("class", "legend")
      .attr("transform", "translate(50,30)")
      .style("font-size", "12px")
      .call(d3.legend)

        setTimeout(function () {
            legend
              .style("font-size", "20px")
              .attr("data-style-padding", 10)
              .call(d3.legend)
        }, 1000)

    });

</script></div>

我的两个 y 轴的值有很大差异，我想将 y 轴分开一半，这样图形之间就不会有太大的差距。我知道使用 d3.axis.tickFormat 可能有助于解决问题，但我不知道应该在哪里调用此方法。无论如何我可以将 y 轴值分成一半吗？

[{"country":"Singapore","year": "1960", "value":"887", "value2": "199"},
{"country":"Singapore","year": "1965", "value":"218", "value2": "55"},
{"country":"Singapore","year": "1993", "value":"37046", "value2": "931"},
{"country":"Singapore","year": "1994", "value":"38735", "value2": "118"},
{"country":"Singapore","year": "1995", "value":"19903", "value2": "624"},
{"country":"Singapore","year": "1997", "value":"4170", "value2": "125"},
{"country":"Singapore","year": "1998", "value":"10000", "value2": "0"}]

从JSON文件中可以看出，value和value2的差别很大，我希望y轴能够对半分割。

【问题讨论】：

标签： html json d3.js visualization bar-chart

【解决方案1】：

您是否正在寻找这样的东西？

http://jsfiddle.net/LC5YT/

如果是这样，您将需要为与第二组数据对应的 y 轴创建第二个刻度。这样您就可以维护两个映射。请注意，我只是用实际数据替换了您对 JSON 的调用。只需将 data.foreach(... 替换为您对 JSON 的原始调用即可。

此外，为了清理代码，我会尝试将您的图表模块化为反映 Mike Bostock 可重用图表模式的函数。它将使您的代码更具可读性。

【讨论】：

我是否可以为 y 轴上的每个值插入点并为 y 轴上的每个数据值添加鼠标悬停功能？
我可以把图表改成这样吗？ nvd3.org/examples/linePlusBar.html
考虑到这些 cmets 离题，我建议您打开一个新问题。