d3js多折线图正在绘制区域上绘制-问题的更新模式吗？

Question

我创建了一个折线图，该线图绘制了多组线对-尽管我不确定是否要正确或以最d3的方式更新线。 用传入的新数据更新现有路径的正确方法是什么？ 我使用setinterval模拟新数据的到达。

我遇到的另一个问题是，所有线都未绘制在实际的绘图区域上-它们似乎从图表的左侧开始。 我已经检查了x比例尺，它从数据中获取了正确的日期，所以不确定到底发生了什么，是否会评估某些输入值。 我已经很累了，手动将x域设置为一些硬编码的日期，这会改变行的位置，但是肯定这是不对的。 我不确定这是否与更新有关，因为x和y比例得到更新，但路径没有更新。

所以我的问题是因为我不确定它们是否相互关联：

1）如何确定线条图？

2）我是否正确地为两行进行更新？

 <!DOCTYPE html> <meta charset="utf-8"> <head> <title>my plots!</title> <script src="https://d3js.org/d3.v5.min.js"></script> <!-- load the d3.js library --> <style> /* set the CSS */ body { font: 12px Arial Bold; } .graph-svg-component { background-color: white; } .line { fill: none; stroke-width: 3px; } .rawline { fill: none; stroke-width: 3px; } .raw2line { fill: none; stroke-width: 10px; opacity: 0.4; } </style> </head> <body> <h1> plot</h1> <div id="graphDiv"></div> <!-- css FIll none is important so that its just a line and not an area --> <script> var data_set = [{ 'Asset_Date': '2009-03-23', 'Raw': 25, 'Raw2': 25, 'Asset': 'A' }, { 'Asset_Date': '2009-03-24', 'Raw': 28, 'Raw2': 25.4, 'Asset': 'A' }, { 'Asset_Date': '2009-03-25', 'Raw': 26, 'Raw2': 25.37, 'Asset': 'A' }, { 'Asset_Date': '2009-03-26', 'Raw': 22, 'Raw2': 25.03, 'Asset': 'A' }, { 'Asset_Date': '2009-03-27', 'Raw': 19, 'Raw2': 24.42, 'Asset': 'A' }, { 'Asset_Date': '2009-03-28', 'Raw': 23, 'Raw2': 24.28, 'Asset': 'A' }, { 'Asset_Date': '2009-03-23', 'Raw': 30, 'Raw2': 30, 'Asset': 'B' }, { 'Asset_Date': '2009-03-24', 'Raw': 31, 'Raw2': 33, 'Asset': 'B' }, { 'Asset_Date': '2009-03-25', 'Raw': 32, 'Raw2': 34, 'Asset': 'B' }, { 'Asset_Date': '2009-03-26', 'Raw': 33, 'Raw2': 35, 'Asset': 'B' }, { 'Asset_Date': '2009-03-27', 'Raw': 34, 'Raw2': 36, 'Asset': 'B' }, { 'Asset_Date': '2009-03-28', 'Raw': 37, 'Raw2': 39, 'Asset': 'B' } ] var margin = { top: 30, right: 50, bottom: 30, left: 50 }; var svgWidth = 800; var svgHeight = 800; var graphWidth = svgWidth - margin.left - margin.right; var graphHeight = svgHeight - margin.top - margin.bottom; var parseDate = d3.timeParse("%Y-%m-%d"); var x = d3.scaleTime().range([0, graphWidth]); var y = d3.scaleLinear().range([graphHeight, 0]); var z = d3.scaleOrdinal(d3.schemeCategory10); // for colours var xAxis = d3.axisBottom().scale(x).ticks(10); var yAxis = d3.axisLeft().scale(y).ticks(20); // Need to create the lines manually for each bit of data // Line for raw value var line = d3.line() .x(function(d) { return x(d.Asset_Date); }) .y(function(d) { return y(d.Raw); }); // Line for raw2 value var line2 = d3.line() .x(function(d) { return x(d.Asset_Date); }) .y(function(d) { return y(d.Raw2); }); // Creates the SVG area within the div on the dom // Just doing this once var svg = d3.select("#graphDiv") .append("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "graph-svg-component"); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(d3.zoom().on("zoom", function() { svg.attr("transform", d3.event.transform) })); // // Add the X Axis g.append("g").attr("class", "x axis") .attr("transform", "translate(0," + graphHeight + ")") .call(xAxis); // Text label for x axis g.append("text") .style("text-anchor", "middle") .text("timeseries dates") .attr("transform", "translate(" + (graphWidth / 2) + " ," + (graphHeight + margin.top) + ")"); // // Add the Y Axis g.append("g") .attr("class", "y axis") .call(yAxis); // text label for the y axis g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (graphHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("price points"); function drawGraph(data_set) { console.log('Dataset contains', data_set.length, 'item(s)') data_set = data_set.map(function(d) { return { Asset: d.Asset, Asset_Date: parseDate(d.Asset_Date), Raw: +d.Raw, Raw2: +d.Raw2 }; }); // Keying data on Asset for easy grouping var nested = d3.nest() .key(function(d) { return d.Asset; }) .entries(data_set); // Set X domain to min and max of date from data set min1 = d3.min(nested, function(d) { return d3.min(d.values, function(d) { return d.Asset_Date; }); }); max1 = d3.max(nested, function(d) { return d3.max(d.values, function(d) { return d.Asset_Date; }); }); console.log(min1) console.log(max1) console.log(d3.extent([min1, max1])) x.domain(d3.extent([min1, max1])); y.domain([ d3.min(nested, function(d) { return d3.min(d.values, function(d) { return Math.min(d.Raw, d.Raw2); }); }), d3.max(nested, function(d) { return d3.max(d.values, function(d) { return Math.max(d.Raw, d.Raw2); }); }) ]); // for colours - by asset as they are grouped var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(d3.keys(nested[0]) .filter(function(key) { return key === "Asset"; })); // Update the axis svg.selectAll('.x.axis').call(xAxis); svg.selectAll('.y.axis').call(yAxis); // Join data var city = svg.selectAll(".city").data(nested, function(d) { console.log(d); return d.key; }) console.log(city) // Remove old elements as needed city.exit().transition().duration(750).remove() // Add a new group per category we have - aka new elements var cityEnter = city.enter().append("g").attr("class", "city"); // Add line for raw value cityEnter.append("path") .attr("class", "rawline") .attr("fill", "none") .transition() .duration(500) .style("stroke", function(d) { return color(d.key); }) .attr("d", function(d) { console.log("update rawline path"); return line(d.values); }); // Add line for raw2 value cityEnter.append("path") .attr("class", "raw2line") .attr("fill", "none") .transition() .duration(500) .style("stroke", function(d) { return color(d.key); }) .attr("d", function(d) { console.log("update raw2line path"); return line2(d.values); }); var t1 = city.transition(); // Doing the update the lines with new data t1.select(".rawline").attr("d", function(d) { return line(d.values); }); t1.select(".raw2line").attr("d", function(d) { return line2(d.values); }); } // display initial chart window.onload = drawGraph(data_set) //Push new data every 5 seconds for a specific date var h = setInterval(function() { data_set.push({ 'Asset_Date': '2009-03-29', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }, { 'Asset_Date': '2009-03-30', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }, { 'Asset_Date': '2009-03-31', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }, { 'Asset_Date': '2009-04-01', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }, { 'Asset_Date': '2009-04-02', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }, { 'Asset_Date': '2009-04-03', 'Raw': Math.floor(Math.random() * 50), 'Raw2': Math.floor(Math.random() * 25), 'Asset': 'A' }); console.log('Redrawing') drawGraph(data_set); clearInterval(h); //doing this so that it doesnt spam - if i uncomment this, it will keep spamming new lines }, 5000); </script> </body> </html> 

对于上述问题，我们将不胜感激-如果您需要更多详细信息-请与我们联系！ 非常感谢！

Answer 1

1. 您正在执行select更新行， select将仅选择第一个匹配项，将其替换为selectAll将解决您的问题。

2. 在使用轴的边距时，可以将translate设置为.city组。 因此，当您附加那个g ，它将看起来像这样：

    var cityEnter = city.enter().append("g") .attr("transform", "translate(" + margin.left + ", 0)") .attr("class", "city"); 

这是一个jsfiddle： https ://jsfiddle.net/wt6vkj82/