在 y 轴值之间显示水平虚线

问题描述

需要在每个 y 轴上显示 10 条虚线，如下图所示。

[img]https://i.imgur.com/ZTRnP0o.jpg[/img]

我当前的输出如下图所示。 [img]https://i.imgur.com/AfuXZH4.jpg[/img]

我正在使用 d3 图表 v4 并附上我当前的工作代码。

HTML

<!DOCTYPE html>
<Meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

CSS

.yAxis > .tick > text {
    stroke: #4a4a4a;
    shape-rendering: crispEdges;
    font-size: 14px;
}

.yAxis > path {
    stroke: #bebebe;
}

Javascript

var y = d3.scaleLinear()
        .domain([0,d3.max(data,function (d) { return +d.Value; })])
        .range([height,0])
   
    svg.append("g")
        .attr("class","yAxis")
        .call(d3.axisLeft(y).tickPadding(5))
        .selectAll("text")
        .attr("x",0)
        .attr("y",-15)
        .attr("dy",".35em")
        .attr("transform","rotate(-90)")
        .style("text-anchor","middle");

    d3.selectAll("g.yAxis g.tick")
        .append("line")
        .attr("class","gridline")
        .attr("x1",0)
        .attr("y1",0)
        .attr("x2",width)
        .attr("y2",0);

示例代码链接 - https://www.d3-graph-gallery.com/graph/line_several_group.html

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript