Question

我已经完成了示例Focus+Context via Brushing chart并且无法弄清楚如何为双缩放缩放图表实现它。我已经创建了焦点和上下文元素，并试图让它们协同工作。这是我的Fiddle。 Coffeescript文章如下：

focus = canvas.append("g").attr("transform", "translate(" + margin.left + "," +       margin.top + ")")

focus.append("svg:rect").attr("width", width).attr("height", height).attr("class", "plot")
clip = focus.append("svg:clipPath")
  .attr("id", "clip")
  .append("svg:rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", width)
  .attr("height", height)


drawHorizontalAxis(focus, xAxis, width, height, "dates", "")
drawVerticalAxis(focus, yLeftAxis, "price", "")
drawRightVerticalAxis(focus, yRightAxis, width, "yoy", "")

chartBody = focus.append("g")
.attr("clip-path", "url(#clip)")

drawPathLine(chartBody, line1, data, "", "", "line1")
drawPathLine(chartBody, line2, data, "", "", "line2")

# make grid
focus.append("g")
.attr("class", "y grid")
.call(make_y_axis().tickSize(-width, 0, 0).tickFormat(""))


# --- Below chart --- #

# brush axis
xScale2 = d3.time.scale().range([0,width]).domain(d3.extent(data, (d) -> d.date))
xAxis2 = d3.svg.axis().scale(xScale).orient("bottom").ticks(5)

yScale2 = d3.scale.linear().domain([0, yLeftMax]).range([height2, 0])

brush = d3.svg.brush()
 .x(xScale2)
 .on("brush", brushed)

brushed = ->
  xScale.domain (if brush.empty() then xScale2.domain() else brush.extent())
  focus.select("._x._axis").call xAxis


context = canvas.append("g").attr("transform", "translate(" + margin2.left + "," + margin2.top + ")")

context.append("g").attr("class", "_x _axis").attr("transform", "translate(0," + height2 + ")").call xAxis2
context.append("g")
  .attr("class", "_x brush")
  .call(brushed)
.selectAll("rect")
  .attr("y", -6)
  .attr("height", height2 + 7)

Answer 1

当您使用两个y轴进行此操作时没有区别 - 只有x轴会发生变化。除了以下内容之外，你的例子几乎就在那里。

您在应该＆＃34; hold＆＃34;的元素上调用brushed刷子而不是brush。
在告诉画笔使用它之前，需要定义brushed函数。
您需要在画笔上重新绘制线条，即

canvas.select(".line1").attr("d", line1(data)) canvas.select(".line2").attr("d", line2(data))

此外，缩放行为干扰了画笔，因为它在相同的元素上处于活动状态。我已经修复了问题并禁用了缩放以用于演示目的here。

聚焦+上下文通过刷新d3中的双缩放缩放图表

1 个答案: