我正在使用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;
});
答案 0 :(得分:4)
您可以通过轴访问比例,即chart.xAxis.scale()
等。要将它们应用于坐标,您可以执行类似
.attr("x", chart.xAxis.scale()(50));