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

Question

我希望能够链接多个图表，使一个图表与另一个图表发生变化。但我不确定是否我应该为每个图表创建一个单独的 div，并根据第一个 div 内 svg 中的事件在第二个 div 中创建 svg我应该在事件触发器的同一个 div 内创建另一个 svg使用另一个 svg 创建一个 svg（如果可能）将所有图表放在 1 div 1 svg 中注意：数据由我打算绘制的所有图形共享。请建议！目前，我无法让其中任何一个工作。

Answer 1

您在谈论<svg>元素，但这些只是用于绘制图表的占位符。

您需要做的主要事情是读取要绘制的数据并将其存储在全局变量中，或者将其传递给绘制单个图表的函数。

function drawLineChart(data) {

  var lineChart = d3.body.append('svg').classed('line-chart', true);

  // draw a line chart here

  return lineChart;

}

function drawBarChart(data) {

  var barChart = d3.body.append('svg').classed('bar-chart', true);

  // draw a bar chart here

  return barChart;

}

function registerEventListeners(charts) {

  // given an array of charts, register `mouseenter`, `mouseleave`,

  // or `click` event listeners for each one, and, within their handlers,

  // also change the other charts you've passed.

}

d3.csv('data', function(data, error) {

  // read the data and call the other functions with it

  var charts = [

    drawLineChart(data),

    drawBarChart(data),

  ];

  registerEventListeners(charts);

});