javascript - div 部分中的 d3 图

Question

我在一个 HTML 页面中绘制多个图表，我想在 div 部分中添加第二个图表以获得更合适的图表。

这是一个 Plunker我创造了。

谁能告诉我如何更改下面的代码以将其放在 div 部分中？

HTML:

 <svg width="1200" height="550"></svg>

Javascript:

var svg = d3.select("svg"),
    margin = {top: 70, right: 20, bottom: 50, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Answer 1

在文件中script.js您将 svg 附加到现有的 div，如下所示:

var svg = d3.select("#chart").append("svg")

因此，在文件 positiveChart.js 中执行相同操作.

像这样将 svg 附加到现有的 div(同时还为 svg 元素提供您在 index.html 中拥有的高度和宽度属性):

var svg = d3.select("#chart1").append("svg").attr("width", 1200).attr("height", 550)

然后在index.html制作一个 div <div id="chart1"></div>可以由 d3 选择以附加您的第二个 svg。

Forked plunkr