我正在研究d3图表,反应和新的反应和d3。我想解决的问题是;
我有一个折线图,我启用了UseInteractiveGuideline,所以当我将鼠标悬停在图表上时,我可以看到我的值在该点(线上有一个圆圈)。问题是;对于接近最小或最大网格线的y轴值,数据点仅从边缘域值中裁剪并变为半圆。
line chart with cropped data points
我需要某种填充来看到边缘上的整个点。
除了更改域值之外,有没有办法做到这一点?我不想更改域值,因为我的数据是动态的,并且可以达到非常大的数字,所以它可能不稳定。
nv.addGraph(() => {
let chart = nv.models.lineChart()
.padData(true)
.noData('')
.margin({ "top": 20, "right": 20, "bottom": 20, "left": 20 })
.yDomain([0, max])
.useInteractiveGuideline(true);
chart.xAxis
.showMaxMin(false)
.ticks(5)
.tickFormat((d) => {
return ticks[d]
})
chart.yAxis.tickFormat((d) => {
return d;
})
d3.select('#chart')
.datum(chartData)
.transition().duration(700)
.call(chart);
return chart;
});
答案 0 :(得分:1)
我已添加到以下行并且问题已解决
chart.lines.clipEdge(false);