如何解决在 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 举报,一经查实,本站将立刻删除。