在单个 html 页面中显示多个 d3.js 图表

Question

我有粘贴 在这里的 d3.js 代码。

我试图在同一页中显示多个图表。虽然 d3.js 代码是相同的。说一个来自 data1.json，另一个来自 data2.json。以下是困扰我的片段。

 <svg width="960" height="960"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg2 = d3.select("svg"),
    margin = 20,
    diameter = +svg2.attr("width"),
    g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

根据 SO here 、 here 、 here 、 here 或 here 中的不同答案，解决方案似乎是以下之一：

• 使用不同的变量名来保存 svgs，例如 svg1、svg2.. 等等，我已经做到了。
• 使用 此处 描述的方法。

      var chart1 = d3.select("#area1")
         .append("svg")

方法二对我不起作用，因为它显示空白页。

如何解决这个问题。我确定我没有正确获取语法。

原文由 kingmakerking 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在同一页面上使用多个 SVG 完全没有问题。这是一个例子：

 var svg1 = d3.select("#svg1");
svg1.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "red");
var svg2 = d3.select("#svg2");
svg2.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "blue");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="200" id="svg1"></svg>
<svg width="200" height="200" id="svg2"></svg>

原文由 r3mainer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

无需像您现在所做的那样重复所有代码。 [不要重复自己](https://en.wikipedia.org/wiki/Don’t_repeat_yourself)。

一个简单的替代方法是将所有 D3 代码包装在一个函数中，该函数具有两个参数 selector 和 url ：

 function draw(selector, url){
    //code here
};

然后，在该函数 draw 中，设置 SVG 的位置：

 var svg = d3.select(selector).append("svg")...

以及您获取数据的 URL：

 d3.json(ulr, function(error, root) {...

之后，只需使用不同的参数调用 draw 函数两次：

 draw(selector1, url1);
draw(selector2, url2);

这是一个演示，仔细阅读它是如何工作的：

 draw("#svg1", "#data1");
draw("#svg2", "#data2");

function draw(selector, url){

var data = d3.csvParse(d3.select(url).text())

var width = 500,
    height = 150;

var svg = d3.select(selector)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scalePoint()
    .domain(data.map(function(d) {
        return d.name
    }))
    .range([50, width - 50])
    .padding(0.5);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.value
    }) * 1.1])
    .range([height - 20, 6]);

var line = d3.line()
	.x(function(d){ return xScale(d.name)})
	.y(function(d){ return yScale(d.value)});

svg.append("path")
	.attr("d", line(data))
	.attr("stroke", "teal")
	.attr("stroke-width", "2")
	.attr("fill", "none");

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,130)")
    .attr("class", "xAxis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(50,0)")
    .attr("class", "yAxis")
    .call(yAxis);

}

 pre {
display: none;
}

 <script src="https://d3js.org/d3.v4.min.js"></script>
<div>First SVG</div>
<div id="svg1"></div>
<div>Second SVG</div>
<div id="svg2"></div>
<pre id="data1">name,value
foo,8
bar,1
baz,7
foobar,9
foobaz,4</pre>
<pre id="data2">name,value
foo,1
bar,2
baz,3
foobar,9
foobaz,8</pre>

原文由 Gerardo Furtado 发布，翻译遵循 CC BY-SA 3.0 许可协议