Question

D3 js中的差异图表未正确显示图表。

我在tsv文件中有以下数据。

对于C列，

有一个值50但是图表在Y轴上停留在大约30+。我可以知道如何正确绘制图表。

date    A   C
20140108        1
20140110        2
20140116    1   3
20140117    1   1
20140120    20  38
20140127    0   1
20140128    0   50
20140130    1   2
20140203    25  2
20140210    3   5
20140211    40  0
20140212        1
20140218        4

代码：

            body {
              font: 10px sans-serif;
            }

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

            .x.axis path {
              display: none;
            }

            .area.above {
              fill: rgb(252,141,89); //for red
              }

            .area.below {
              fill: rgb(145,207,96); //for green
            }

            .line {
              fill: none;
              stroke: #000;
              stroke-width: 1.5px;
            }

            </style>
            <body>
            <!script type="text/javascript" src="d3/d3.v3.min.js"><!/script>

            <script src="http://d3js.org/d3.v3.min.js"></script>

            <script>

            var margin = {top: 30, right: 30, bottom: 50, left: 50},
                width = 960 - margin.left - margin.right,
                height = 800 - margin.top - margin.bottom;

            var parseDate = d3.time.format("%Y%m%d").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");

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

            var line = d3.svg.area()
                .interpolate("basis")
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d["A"]); });

            var area = d3.svg.area()
                .interpolate("basis")
                .x(function(d) { return x(d.date); })
                .y1(function(d) { return y(d["A"]); });

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

            d3.tsv("data.tsv", function(error, data) {
              data.forEach(function(d) {
                d.date = parseDate(d.date);
                d["A"]= +d["A"]; //data here should  be in sync with columns in the input file
                d["C"] = +d["C"];
              });

              x.domain(d3.extent(data, function(d) { return d.date; }));

              y.domain([
                d3.min(data, function(d) { return Math.min(d["A"], d["C"]); }),
                d3.max(data, function(d) { return Math.max(d["A"], d["C"]); })
              ]);

              //svg block starts from here

              svg.datum(data); //get or set data for individual elements, without computing a join

              svg.append("clipPath")
                  .attr("id", "clip-below")
                .append("path")
                  .attr("d", area.y0(height));

              svg.append("clipPath")
                  .attr("id", "clip-above")
                .append("path")
                  .attr("d", area.y0(0));

              svg.append("path")
                  .attr("class", "area above")
                  .attr("clip-path", "url(#clip-above)")
                  .attr("d", area.y0(function(d) { return y(d["C"]); }));

              svg.append("path")
                  .attr("class", "area below")
                  .attr("clip-path", "url(#clip-below)")
                  .attr("d", area);

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

              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
                 // .append ("text")
                //  .text("New York");

              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("count");
            });

            </script>

D3 js中的差异图表未正确显示图表

0 个答案: