如何在单个 html 页面上实现 D3.js v4 多个单独的图表答案

【问题标题】：How to implement D3.js v4 multiple separate charts on single html page如何在单个 html 页面上实现 D3.js v4 多个单独的图表
【发布时间】：2018-05-18 09:36:58
【问题描述】：

我正在尝试在一个 html 页面上实现多个单独的 D3.js v4 图表（即条形图和折线图）。

【问题讨论】：

欢迎来到 StackOverflow。请阅读How do I ask a good question?和How to create a Minimal, Complete, and Verifiable example

标签： javascript d3.js

【解决方案1】：

为每个图表创建一个新的 SVG 或 Canvas 元素，但给每个图表一个唯一的 ID。为这些图表中的每一个创建不同的基础选择。

例如：

var barChart = d3.select('body').append('svg')
    .attr('id', 'bar-chart');

var lineChart = d3.select('body').append('svg')
    .attr('id', 'line-chart');

现在您可以使用barChart 作为条形图代码的基本选择，并使用lineChart 作为折线图代码的基本选择。

【讨论】：

嗨，Wes，我对两个图表都使用了不同的 SVG 元素并收到此错误：'错误：属性 d：预期数字，“MNaN，116LNaN，117L...”' 当我遇到一个图表代码然后它适用于其他图表，同样适用于其他图表。你知道我在这里想念什么吗？
不知道，我们需要查看您的代码。按照stackoverflow.com/help/mcve 中的说明进行操作（例如，将您的代码缩减为最简单、最清晰的版本）并针对该错误创建一个新问题。