Javascript 具有缩放和更新功能的d3多折线图_Javascript_D3.js

Javascript 具有缩放和更新功能的d3多折线图

javascript d3.js

Javascript 具有缩放和更新功能的d3多折线图,javascript,d3.js,Javascript,D3.js,我正试图添加一个缩放到我的d3折线图，但域出现了问题。第二行的域似乎没有更新，它只使用第一行的域值，因此第二行不可见（csv中的值要大得多）。目标是，无论数据的出价如何，两行都适合画布。所有图形都应缩放到画布的100%高度如果你知道我需要改变什么，请告诉我 <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js" ty

我正试图添加一个缩放到我的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>


矩形窗格{
光标：移动；
填充：无；
指针事件：全部；
} 
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.线路{
填充：无；
行程：26b2d5；
笔划宽度：1.5px；
}
.line2{
填充：无；
行程：#bdc1cc；
笔划宽度：1.5px；
}
svg{
字体：10px无衬线；
形状渲染：边缘清晰；
}










var margin={顶部：10，右侧：20，底部：30，左侧：50}，
宽度=1000-margin.left-margin.right，
高度=570-margin.top-margin.bottom；
var parseDate=d3.time.format（“%W-%Y”）.parse，
formatDate=d3.time.format（“%Y”）；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（15）
.1（6）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（5）
.1（6）；
var line=d3.svg.line（）
.x（函数（d）{返回x（d.meldewoche）；}）
.y（函数（d）{返回y（d.faelle）；}）；
var line2=d3.svg.line（）
.x（函数（d）{返回x（d.woche）；}）
.y（函数（d）{返回y（d.anzahl）；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var zoom=d3.behavior.zoom（）
.打开（“缩放”，绘制）；
svg.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“x”，x（0））
.attr（“y”，y（1））
.attr（“宽度”，x（1）-x（0））
.attr（“高度”，y（0）-y（1））；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）；
svg.append（“g”）
.attr（“类”、“y轴”）；
追加（“路径”）
.attr（“类”、“行”）
.attr（“剪辑路径”、“url（#剪辑）”）；
svg.append（“rect”）
.attr（“类”、“窗格”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.呼叫（缩放）；
d3.csv（“数据-a.csv”，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
var parseDate=d3.time.format（“%m-%Y”）.parse
d、 woche=parseDate（d.woche）；
d、 anzahl=+d.anzahl；
});
x、 域名（【新日期（2001年1月）、新日期（2015年12月）】）；
y、 域（[0，d3.max（数据，函数（d）{return d.anzahl；}）]）；
zoom.x（x）；
追加（“路径”）
.attr（“类别”、“第2行”）
.attr（“剪辑路径”、“url（#剪辑）”）；
选择（“path.line2”）.data（[data]）；
功能测试（）{
svg.select（“g.x.axis”）.call（xAxis）；
svg.select（“g.y.axis”）.call（yAxis）；
svg.select（“path.line2”）.attr（“d”，line2）；
}
});
d3.csv（“数据优先.csv”，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
var parseDate=d3.time.format（“%W-%Y”）.parse；
d、 meldewoche=解析日期（d.meldewoche）；
d、 法尔=+d.faelle；
});
x、 域名（【新日期（2001年1月）、新日期（2016年1月）】）；
y、 域（[0，d3.max（数据，函数（d）{return d.faelle；}）]）；
zoom.x（x）；
选择（“path.line”）.data（[data]）；
draw（）；
});
函数updateFirst（）{
d3.csv（“数据优先.csv”，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
parseDate=d3.time.format（“%W-%Y”）.parse
d、 meldewoche=解析日期（d.meldewoche）；
d、 法尔=+d.faelle；
});
x、 域名（【新日期（2001年1月）、新日期（2016年1月）】）；
y、 域（[0，d3.max（数据，函数（d）{return d.faelle；}）]）；
zoom.x（x）；
svg.selectAll（“path.line”）.data（[data]）；
更新（）；
});
}
函数updateSecond（）{
d3.csv（“数据秒.csv”，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
d、 meldewoche=解析日期（d.meldewoche）；
d、 法尔=+d.faelle；
});
x、 域名（【新日期（2001年1月）、新日期（2015年1月）】）；
y、 域（[0，d3.max（数据，函数（d）{return d.faelle；}）]）；
zoom.x（x）；
svg.selectAll（“path.line”）.data（[data]）；
更新（）；
});
}
函数updateA（）{
d3.csv（“数据-a.csv”，函数（错误，数据）{
我
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]);
}