Question

我在D3中完成了可缩放的区域绘图，效果很好。现在我试图在绘图中间沿x轴添加一个矩形到指定位置。但是，我似乎无法弄清楚如何做到这一点。＆＃34; RECT＆＃34;元素是使用绘图的绝对（x，y）指定的，因此当使用缩放时它保持在相同的位置。

所以我想知道是否有办法打平＆＃34; rect＆＃34;在绘图时到轴，以便它受益于所有缩放和平移行为，或者我是否需要根据平移手动编辑矩形的x，y，宽度和长度以及确定相应的x和y坐标的位置在图上？我正在尝试使用＆＃34; rect＆＃34;因为它似乎是最灵活的元素。

由于

亚历

Answer 1

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

如果您从绘图坐标开始，那么可能使用刻度上的反转函数将有帮助（至少可用于定量刻度），例如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（作为函数）是轴所基于的比例。

如何在D3中向指定轴添加矩形

1 个答案: