Question

我构建了一个Web应用程序，您可以在其中选择不同的数据集并显示它们。页面上共有3种主要数据类型，分为3种不同的图表。如果您从相同类型中选择2个或更多数据集，它们将被加载到同一图表中，这样最多可以包含3个图表。

放大到单个图表效果很好。

问题是，每个图表都有其自己的svg，因此会被绘制，但是它们都具有相同的xAxis。我想做的是对所有图表进行同步缩放。如果我放大一个图表，我希望其他两个图表具有与缩放的图表相同的x域，但是我无法访问Axis变量（也不能访问数据路径，但应该与轴一样工作，因此我专注于他们）。

我试图从DOM访问Axes，但是我以这种方式获得的数组只是DOM元素（ofc），而不是需要使用的d3变量d3，因此一旦我想重用，我就会出错放大一张图表的代码。

当我访问图表变量本身时，我得到一个选择，我无法将其用于其他任何事情。我不知道将xAxis排除在外（或者甚至没有办法）。

称为更新的画笔：

var brush = d3.brushX()                   // Add the brush feature using the d3.brush function
    .extent( [ [0,0], [width,height] ] )  // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
    .on("end", updateChart);

更新功能：

function updateChart() {
    console.log(xAxis); // The xAxis of the chart that called the update function
    let xAxes = document.getElementsByClassName('xAxis'); // Array of all xAxes that are currently on the Webpage (max the 3 I want to have)
    extent = d3.event.selection

    if(!extent){
      if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
      x.domain([ 4,8])
    }else{
      x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
      charts[chart][0].select(".brush").call(brush.move, null) 
    }

    // The actual update on the zoomed chart I want to extent to all
    xAxis.transition().duration(1000).call(d3.axisBottom(x));
        charts[chart][0].selectAll('path')
        .transition()
        .duration(1000)
        .attr("d", line);   
  }

图表：=集合我将图表存储在每个值中是一个长度= 2的数组，其中[0] =图表，[1] =下一个数据集的颜色代码

图表：=集合中键之一的字符串

在d3.js中访问其他图表

0 个答案: