我正在使用 nvd3 绘制一些系列,并想向图中添加一些任意矩形。如何访问 d3 图的底层 x 和 y 比例,以便将矩形坐标转换为 svg 像素坐标,以便与现有数据的比例相同:
function d3_render(response) {
nv.addGraph(function() {
var data = response;
chart.xAxis
.axisLabel('Time (s)')
.tickFormat(d3.format(',f'));
chart.x2Axis
.tickFormat(d3.format(',f'));
chart.yAxis
.axisLabel('Units normalized')
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(data)
.transition().duration(1000)
.call(chart);
// Adding my rectangle here ...
d3.select('#chart svg')
.append('g')
.append('rect')
.attr('x', 50) // need to transform to same scale.
.attr('y', 50) // need to transform to same scale.
.attr('width', 100) // need to transform to same scale.
.attr('height', 100) // need to transform to same scale.
.attr('fill', 'red')
nv.utils.windowResize(chart.update);
return chart;
});
您可以通过轴访问比例,即chart.xAxis.scale()
等等。要将这些应用到您的坐标,您可以执行类似的操作
.attr("x", chart.xAxis.scale()(50));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)