Question

我正在尝试在d3的条形图上添加画笔。目前我正在使用条形图作为我的例子： https://bl.ocks.org/mbostock/1134768

这是我要实现的画笔示例：http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我只能找到丛林位于图表下方而不是主图表本身的示例。任何人都可以向我解释如何将画笔放在条形图的顶部，或者指向我可以遵循的示例方向？

Answer 1

在您所指的Brush & Zoom示例中，有以下几行：

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

...
  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

这些是指定图表区域，画笔区域和缩放区域的位置。您只需调整脚本开头指定的margin和margin2值，或在此处明确设置不同的转换。

您需要margin.top > margin2.top，并调整底部边距。

在d3条形图上添加画笔

1 个答案: