时间戳

首页 > 解决方案 > Display horizontal dashed lines between y axis values

javascript - Display horizontal dashed lines between y axis values

问题描述

Need to show 10 dashed lines in each y axis like in below image.

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

My current output is like in below image. [img]https://i.imgur.com/AfuXZH4.jpg[/img]

I'm using d3 chart v4 and my current working code attached.

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);

Sample code link - https://www.d3-graph-gallery.com/graph/line_several_group.html

标签： javascripthtmlcssd3.js

解决方案

推荐阅读