Question

我正在使用d3绘制图表。

let y = scaleLinear().rangeRound([height, 0]);
let y_axis = axisLeft(y);

g.append("g").attr("transform", "translate(transltion," + height + ")")
   .call(axisRight(y).ticks(tick))
   .attr("transform", "translate(" + yLeftTrasltion+ "," + yBotmrasltion + ")");

这是绘制0,10,20,30,40,50。现在，我希望它不显示0.我怎样才能实现这个目标？

Answer 1

要删除0并使用第一个勾号，您有两个选项：

在轴元素上调用.tickValues()并传递一个您想要显示的值数组。因此，在没有0的情况下，它将是[10,20,30,40,50]。这样你就不会再在轴上渲染0了。完整示例如下所示：

axisRight(y).tickValues([10,20,30,40,50]);

更多手动选项是运行选择并手动将其删除。假设您的轴有一个类.axis。您可以运行d3选择以手动删除第一个刻度。请注意，选项1虽然更好，更清洁。手动删除将如下所示：

d3.select('.axis .tick:first-child').remove()

Answer 2

使用“填充不透明度”。

.style('fill-opacity', d => d === 0 ? 0.0 : 1.0)

Answer 3

这会有所帮助 x_axis = d3.axisBottom() .scale(xscale).tickSizeOuter([40]).tickSizeInner([0]);

Answer 4

您可以使用 CSS：

.tick:first-of-type line{
    fill: none;
    stroke: none;
}

如何删除d3中的第一个刻度

4 个答案: