为了在 D3 中拥有多个相互关联的图表，应该如何构建 HTML 的布局

Question

我希望能够链接多个图表，使一个图表与另一个图表发生变化。但我不确定是否

1. 我应该为每个图表创建一个单独的 div，并根据第一个 div 内 svg 中的事件在第二个 div 中创建 svg

2. 我应该在事件触发器的同一个 div 内创建另一个 svg

3. 使用另一个 svg 创建一个 svg（如果可能）

4. 将所有图表放在 1 div 1 svg 中

注意：数据由我打算绘制的所有图形共享。

请建议！目前，我无法让其中任何一个工作。

Answer 1

您在谈论<svg>元素，但这些只是用于绘制图表的占位符。您需要做的主要事情是读取要绘制的数据并将其存储在全局变量中，或者将其传递给绘制单个图表的函数。function drawLineChart(data) {&nbsp; var lineChart = d3.body.append('svg').classed('line-chart', true);&nbsp; // draw a line chart here&nbsp; return lineChart;}function drawBarChart(data) {&nbsp; var barChart = d3.body.append('svg').classed('bar-chart', true);&nbsp; // draw a bar chart here&nbsp; return barChart;}function registerEventListeners(charts) {&nbsp; // given an array of charts, register `mouseenter`, `mouseleave`,&nbsp; // or `click` event listeners for each one, and, within their handlers,&nbsp; // also change the other charts you've passed.}d3.csv('data', function(data, error) {&nbsp; // read the data and call the other functions with it&nbsp; var charts = [&nbsp; &nbsp; drawLineChart(data),&nbsp; &nbsp; drawBarChart(data),&nbsp; ];&nbsp; registerEventListeners(charts);});