Question

我试图将缩放添加到我的d3折线图并且遇到了域名问题。看起来第二行的域名没有更新，它只使用第一行的域值，因此第二行不可见（csv中的值要大得多）。目标是两条线都适合画布，无论数据的出价如何。所有图形都应缩放到画布的100％高度。

如果您知道我需要改变什么，请告诉我。

<!doctype html>
<html>
  <head>  
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
<style>
rect.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
} 
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: #26b2d5;
  stroke-width: 1.5px;
}
.line2 {
  fill: none;
  stroke: #bdc1cc;
  stroke-width: 1.5px;
}
svg {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}
</style>

      <!--NAVIGATION-->
      <nav>
        <div>
            <ul>
                <li><a href='#'>First</a>
                    <li><a href='#'><div>
                            <input type="button" 
                                   value="A" 
                                   onclick="updateFirst();updateA();" />
                    </div></a></li>
                    <li><a href='#'><div>
                            <input type="button" 
                                   value="B" 
                                   onclick="updateFirst();updateB();" />
                    </div></a></li>
                  </li>            

                <li><a href='#'>Second</a>
                    <li><a href='#'><div>
                            <input type="button" 
                                   value="A" 
                                   onclick="updateSecond();updateA();" />
                    </div></a></li>
                    <li><a href='#'><div>
                            <input type="button" 
                                   value="B" 
                                   onclick="updateSecond();updateB();" />
                    </div></a></li>
                </li>
            </ul>
          </div>
      </nav>

      <!--MAIN-->
      <main>

      <script>
        var margin = {top: 10, right: 20, bottom: 30, left: 50},
            width = 1000 - margin.left - margin.right,
            height = 570 - margin.top - margin.bottom;

        var parseDate = d3.time.format("%W-%Y").parse,
            formatDate = d3.time.format("%Y");

        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(15)
            .tickPadding(6);
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(5)
            .tickPadding(6);

        var line = d3.svg.line()
            .x(function(d) { return x(d.meldewoche); })
            .y(function(d) { return y(d.faelle); });
        var line2 = d3.svg.line()
            .x(function(d) { return x(d.woche); })
            .y(function(d) { return y(d.anzahl); });

        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 + ")"); 

        var zoom = d3.behavior.zoom()
            .on("zoom", draw);

        svg.append("clipPath")
            .attr("id", "clip")
          .append("rect")
            .attr("x", x(0))
            .attr("y", y(1))
            .attr("width", x(1) - x(0))
            .attr("height", y(0) - y(1));

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

        svg.append("path")
            .attr("class", "line")
            .attr("clip-path", "url(#clip)");

        svg.append("rect")
            .attr("class", "pane")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);


        d3.csv("data-a.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                    var parseDate = d3.time.format("%m-%Y").parse
                    d.woche = parseDate(d.woche);
                    d.anzahl = +d.anzahl;
           });
            x.domain([new Date(2001, 01), new Date(2015, 12)]);
            y.domain([0, d3.max(data, function(d) { return d.anzahl; })]);
            zoom.x(x); 

            svg.append("path")
                .attr("class", "line2")
                .attr("clip-path", "url(#clip)");

            svg.select("path.line2").data([data]);

            function test() {
              svg.select("g.x.axis").call(xAxis);
              svg.select("g.y.axis").call(yAxis);
              svg.select("path.line2").attr("d", line2);
            }
        });

        d3.csv("data-first.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                    var parseDate = d3.time.format("%W-%Y").parse;
                    d.meldewoche = parseDate(d.meldewoche);
                    d.faelle = +d.faelle;
            });
            x.domain([new Date(2001, 01), new Date(2016, 01)]);
            y.domain([0, d3.max(data, function(d) { return d.faelle; })]);
            zoom.x(x);

            svg.select("path.line").data([data]);
              draw();
        });

        function updateFirst() {              
        d3.csv("data-first.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                    parseDate = d3.time.format("%W-%Y").parse
                    d.meldewoche = parseDate(d.meldewoche);
                    d.faelle = +d.faelle;
            });
            x.domain([new Date(2001, 01), new Date(2016, 01)]);
            y.domain([0, d3.max(data, function(d) { return d.faelle; })]);
            zoom.x(x);

            svg.selectAll("path.line").data([data]);
            update();
        });
        }

        function updateSecond() {              
        d3.csv("data-second.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                    d.meldewoche = parseDate(d.meldewoche);
                    d.faelle = +d.faelle;
            });
            x.domain([new Date(2001, 01), new Date(2015, 01)]);
            y.domain([0, d3.max(data, function(d) { return d.faelle; })]);
            zoom.x(x);

            svg.selectAll("path.line").data([data]);
            update();
        });
        }

        function updateA() {              
        d3.csv("data-a.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                var parseDate = d3.time.format("%m-%Y").parse;
                    d.woche = parseDate(d.woche);
                    d.anzahl = +d.anzahl;
            });

            x.domain([new Date(2001, 01), new Date(2015, 01)]);
            y.domain([0, d3.max(data, function(d) { return d.anzahl; })]);
            zoom.x(x);

            svg.selectAll("path.line2").data([data]);
            update();
        });
        }

        function updateB() {              
        d3.csv("data-b.csv", function(error, data) {
              if (error) throw error;

                data.forEach(function(d) {
                var parseDate = d3.time.format("%m-%Y").parse;
                    d.woche = parseDate(d.woche);
                    d.anzahl = +d.anzahl;
            });

            x.domain([new Date(2001, 01), new Date(2015, 01)]);
            y.domain([0, d3.max(data, function(d) { return d.anzahl+50; })]);
            zoom.x(x);

            svg.selectAll("path.line2").data([data]);
            update();
        });
        }

        function update() {
          svg.select("g.x.axis").transition().duration(350).call(xAxis);
          svg.select("g.y.axis").transition().duration(350).call(yAxis);
          svg.selectAll("path.line").transition().duration(750).attr("d", line);
          svg.selectAll("path.line2").transition().duration(750).attr("d", line2);
        }

        function draw() {
          svg.select("g.x.axis").call(xAxis);
          svg.select("g.y.axis").call(yAxis);
          svg.select("path.line").attr("d", line);
          svg.select("path.line2").attr("d", line2);
        }     
    </script>
    </main>
  </body>
</html>

Answer 1

在更新功能中设置域时，只能查看当前文件。您应该将当前域与当前正在使用的域进行比较，并查看是否需要设置新的最大域

这里有你所拥有的：

y.domain([0, d3.max(data, function(d) { return d.anzahl+50; })]);

这就是你需要的：

var newMax = d3.max(data, function(d) { return d.anzahl+50; });
var oldMax = y.domain()[1];

if (newMax > oldMax){
  y.domain([0, newMax]);
}

d3多线图，带缩放和更新

1 个答案: