我正在使用 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));
关于javascript - 如何访问 nvd3 中 d3 图的 x 和 y 尺度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19392688/