Question

我正在使用D3进行可视化项目。我想实现四个规则，如this。我希望这些规则有助于阅读演示中的值。由于我在current visualization project中有四列时间序列，我希望有四条规则，当我的鼠标移动时，我希望这四条规则可以一起移动。编码这个最简单的方法是什么？

通过查看演示的源代码，我尝试使用我的代码：

  var context = cubism.context();
  d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

我可以在我的html中看到这个元素：

<div class="rule" style="display: inline;">
  <div class="line" style="position: absolute; top: 0px; bottom: 0px; width: 1px; pointer-events: none; display: none;"></div>
</div>

但我发现没有出现任何规则。

此外，根据其documentation，立体主义背景处理实时数据。我不是在我的项目中可视化实时数据，所以我觉得立体主义在这里是一种矫枉过正。是否有更简单的方法来编写四个相似风格的规则，这些规则可以一起移动？

Answer 1

例如，如果您想在焦点上重新定位水平图表的值标签，您可能会说：

context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

https://github.com/square/cubism/wiki/Context#wiki-horizon

编码在d3数据可视化中与鼠标一起移动的四个标尺的最简单方法是什么？

1 个答案: