使用d3在旋转行上刷以创建缩放效果

Question

我正在研究这件事。我在30，45和60角有三条线。我想在这些线上应用一个画笔，这样当图表被刷过的时候，线会被重新绘制在它横过刷过的矩形的位置，并适当地画出轴上的值。任何解决这个问题的帮助或提示都是非常感谢的。

编辑:如果你有不同的解决方案来画旋转线和刷在他们上面，它也是受欢迎的。请帮帮忙。

var ga = d3.select("svg")
    .append("g")
    .attr("class", "a axis")
    .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
    .selectAll("g")
    .data([30, 45, 60])
    .enter()
    .append("g")
    .attr("class", "rotatedlines")
    .attr("transform", function(d) { return "rotate(" + -d + ")"; })
    .attr("stroke-width", 1)
    .attr("stroke", "black")
    .attr("stroke-dasharray", "5,5");

​

​

Answer 1

为了解释我的解决方案：

应采取的基本步骤如下：

• 将x和y尺度的域更新到画笔范围。
• 重画轴
• 计算线的比例尺因子和平移
• 相应地缩放和翻译行容器
• 重设电刷

请注意，步骤3和步骤4之所以必要，只是因为您没有使用刻度来绘制所有东西--更好的方法是为每一行定义两个点，作为绑定到元素的数据，然后使用缩放重新绘制。这将使代码更简单。

但是，用你的方法，这仍然是可能的。为了方便这一点，我对您的代码做了一些修改--特别是，我使用不同的翻译清理了各种嵌套的g元素，并通过它们的x1、x2、y1、y2属性定义了行，而不是通过容器的转换。这两种更改都使您想要实现的功能更容易实现，因为只有单个转换不需要考虑多个其他转换。我还将这些行嵌套在多个g元素中，这样就可以更容易地缩放和转换它们。

笔刷处理程序函数现在看起来如下所示：

// update scales, redraw axes
var extent = brush.extent();
x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]);
y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]);
xAxisG.call(xAxis);
yAxisG.call(yAxis);

这段代码应该是相当清楚的

// compute and apply scaling and transformation of the g elements containing the lines
var sx = (x2.domain()[1] - x2.domain()[0])/(x.domain()[1] - x.domain()[0]),
    sy = (y2.domain()[1] - y2.domain()[0])/(y.domain()[1] - y.domain()[0]),
    dx = -x2(x.domain()[0]) - x2.range()[0],
    dy = -y2(y.domain()[1]) - y2.range()[1];
d3.selectAll("g.container")
  .attr("transform", "translate(" + [sx * dx, sy * dy] + ")scale(" + [sx, sy] + ")");

这是一个棘手的部分--基于新的尺度域，我们需要计算线条的标度和平移。标度因子只是旧的范围与新的范围的比值(注意，我已经复制了未修改的尺度)，即一个大于1的数字。平移决定了(0,0)坐标的移动，并通过旧的(0,0)坐标的差(我从原始尺度的范围中得到)和新域原点的位置根据原始尺度来计算。

在同时应用平移和缩放的同时，我们需要用尺度因子来乘以偏移量。

// reset brush
brush.clear();
d3.select(".brush").call(brush);

最后，我们清除刷子，并重新设置它，以摆脱灰色矩形。

完整的演示这里。

Answer 2

您可以通过d3.event.target.extent()访问画笔范围。绘制天平的流程如下：

• 设定标度
• 设定轴
• 牵引轴

一旦画笔完成，您必须修改比例，然后根据当前的x和y域重新绘制轴。这就是你的意思吗？

我稍微清理了一下代码，并做了一些演示：http://plnkr.co/edit/epKbXbcBR2MiwUOMlU5A?p=preview