0

我在 D3 中完成了一个可缩放的区域图，效果很好。现在我正在尝试在绘图中间沿 x 轴的指定位置添加一个矩形。但是，我似乎无法弄清楚如何做到这一点。“rect”元素是使用绘图的绝对 (x,y) 指定的，因此在使用缩放时它会保持在同一位置。

所以我想知道是否有办法在绘图时将“rect”与轴联系起来，以便它受益于所有缩放和平移行为，或者我是否需要手动编辑矩形的 x、y、宽度和长度翻译以及找出相应的 x 和 y 坐标在图上的位置？我正在尝试使用“rect”，因为它似乎是最灵活的元素。

谢谢

亚历克斯

4

1 回答 1

0

我不确定您是如何进行缩放的，但我猜您正在更改与轴一起使用的比例的参数？您应该能够使用相同的比例来放置矩形。

如果您从绘图坐标开始，那么可能在比例尺上使用 invert 函数会有所帮助（至少可用于定量比例尺），例如https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_invert

您应该能够获取初始绘图坐标并将它们反转以确定可以随着比例变化而移动的数据坐标。

如果比例是线性的，您也可以反转长度和宽度，但如果您的域不包含 0，则必须计算偏移量。最简单的是计算矩形的端点，例如：

var dataX0 = xScale.invert(rect.x);
var dataX1 = xScale.invert(rect.x + rect.width);
var dataWidth = dataX1 - dataX0;

如果您已经拥有轴坐标中的数据，您应该能够执行以下操作：

var rectData = [{x: 'April 1, 1999', y: 10000, width: 100, height:100}];
svg.selectAll('rect.boxy')
    .data(rectData)
    .enter().append('rect').classed('boxy', true)
    .style('fill','black');

svg.selectAll('rect.boxy')
    .attr('x', function(d) { return x(new Date(d.x));} )
    .attr('y', function(d) { return y(d.y);})
    .attr('width', function(d) { return d.width;} )
    .attr('height', function(d) { return d.height;} );

根据您分享的示例，其中 x 和 y（作为函数）是轴所基于的比例。

于 2013-01-04T22:01:36.827 回答