同一页面上的D3折线图和图表

Question

我正在尝试在同一页面上呈现2个图形：图表图形和线性图形

在html中，我有两个分别绑定到2个不同图形的div，如下所示： <div id="svg-container"> <div id="svg-container-avg">我在html中导入的第一个图形是线性的只是不显示路径或x轴的“平均”图。 如果我删除直接导入的图表，效果很好。 我会自动假设两个图之间存在某种依赖关系，但我找不到任何东西...

我的第一个导入线性图：scns-avg.js文件包含此内容

 // Set the dimensions of the canvas / graph var margin = { top: 30, right: 20, bottom: 70, left: 50 }, width = 800 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; var x = d3.scale.linear().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 valueline = d3.svg.line() .x(function(d) { return x(d.scnsID); }) .y(function(d) { return y(d.average); }); var svg2 = d3.select("#svg-container-avg") .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 + ")"); // Get the data d3.json("scns-avg-data-retrieval.php", function(error, data) { data.forEach(function(d) { d.scnsID = d.scnsID; d.average = +d.average; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.scnsID; })); y.domain([0, d3.max(data, function(d) { return d.average; })]); svg2.append("path") // Add the valueline path. .style("stroke", "rgba(13, 183, 196, 0.9)") .attr("d", valueline(data)); svg2.selectAll("dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 3.5) .attr("cx", function(d) { return x(d.scnsID); }) .attr("cy", function(d) { return y(d.average); }) svg2.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg2.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); }); 

 My Data structor in JSON: [{"date":"11-Mar-16","average":"3.18","scnsID":"2"},{"date":"12-Mar-16","average":"3.09","scnsID":"3"},{"date":"15-Mar-16","average":"3.16","scnsID":"4"},{"date":"17-Mar-16","average":"3.20","scnsID":"5"}] 

尝试同时导入两个图形的情况下运行html页面时，scns-avg.js会在控制台中引发错误：属性d =“ M43,2.8124999999999902LNaN，15.46875000000002LNaN，5.6249999999999805L471,0”的无效值，该值指向valueline（代码svg2.append("path") .style("stroke", "rgba(13, 183, 196, 0.9)") .attr("d", valueline(data)); 这取决于这段代码，所以问题一定在这里，但是6个小时以来，我找不到此解决方案var valueline = d3.svg.line() .x(function(d) { return x(d.scnsID); }) .y(function(d) { return y(d.average); });

我的下一个要导入的图表图形，如果禁用，则线性图形可以正确呈现，如下所示：

 var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); 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") .ticks(5); var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "<strong>Frequency:</strong> <span style='color:rgba(13, 183, 196, 0.9)'>" + d.average + "</span>"; }); var svg = d3.select("#svg-container").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 + ")"); svg.call(tip); // Get the data d3.json("scns-data-retrieval.php", function(error, data) { if (error) throw error; data.forEach(function(d) { d.question = d.question; d.average = +d.average; }); x.domain(data.map(function(d) { return d.question; })); y.domain([0, 5]); legendSpace = width/5; svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 3)) .attr("dy", ".71em") .style("text-anchor", "end") .text("Level of need for help:"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.question); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.average); }) .attr("height", function(d) { return height - y(d.average); }) .on('mouseover', tip.show) .on('mouseout', tip.hide); }); function type(d) { d.average = +d.average; return d; }; 

 data structure in JSON: [{"question":1,"average":3.3333333333333},{"question":2,"average":2.5},{"question":3,"average":4},{"question":4,"average":2.75},{"question":5,"average":2.75},{"question":6,"average":2.75},{"question":7,"average":3},{"question":8,"average":3},{"question":9,"average":2.75},{"question":10,"average":3.25},{"question":11,"average":3.25},{"question":12,"average":3.5},{"question":13,"average":3},{"question":14,"average":3.25},{"question":15,"average":3.5},{"question":16,"average":3.5},{"question":17,"average":3.25},{"question":18,"average":3.75},{"question":19,"average":3.5},{"question":20,"average":3},{"question":21,"average":3},{"question":22,"average":3.5},{"question":23,"average":3.25},{"question":24,"average":3.75},{"question":25,"average":3.75},{"question":26,"average":3.75},{"question":27,"average":3.5},{"question":28,"average":2.75},{"question":29,"average":2.25},{"question":30,"average":3.5},{"question":31,"average":3},{"question":32,"average":3}] 

我不能再这样做了，这使我发疯，所以我现在转向stackoverflow的力量！

Answer 1

经过一番疯狂的研究和反复试验后，我解决了这个问题。

当您尝试渲染多个图时，如果它们的类型不同并且不能说-多个线性图，但是类似带有条形图的线性图，则变量范围变得混乱了，并且不限于javascript文件导入到html后。

要解决此问题，必须将每个graph js文件都包装在（function（）{ 您所有的graph代码都在这里 }）（）;中。

这将变量范围限制为仅函数。