d3-在基于y坐标的位置绘制网格线？

Question

I am kind a new to d3.js and want to draw a horizontal grid line based on y coordinate value fiddle , i've tried with if condition at y1 and y2 locations but the lines are overlapping at the top of graph.

Any help is much appreciated.

Answer 1

Your if statement makes little sense to me:

if (y(d) === thresholdValues.minValue) {
    return y(d);
}

This means that only when the value in the screen is exactly thresholdValues.minValue (which is 40 in your code) the line will be painted.

Solution: drop the if statement. Actually, I kept the if just to avoid the first gridline, over the x axis:

if (d != 0) {
    return y(d);
}

Here is your code with that change:

 var margin = { top: 30, right: 20, bottom: 30, left: 50 }; var thresholdValues = { minValue: 40, maxValue: 85 }; var width = 600 - margin.left - margin.right; var height = 270 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); var valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Get the data var data = [{ date: "1-May-12", close: "58.13" }, { date: "30-Apr-12", close: "53.98" }, { date: "27-Apr-12", close: "67.00" }, { date: "26-Apr-12", close: "89.70" }, { date: "25-Apr-12", close: "99.00" }]; data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, 100]); svg.append("path") // Add the valueline path. .attr("d", valueline(data)); svg.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); svg.selectAll("line.horizontalGrid").data(y.ticks(4)).enter() .append("line") .attr({ "class": "horizontalGrid", "x1": margin.right, "x2": width - margin.right, "y1": function(d) { if (d != 0) { return y(d); } }, "y2": function(d) { if (d != 0) { return y(d); } }, "fill": "none", "shape-rendering": "crispEdges", "stroke": "grey", "stroke-width": "2px", "opacity": 0.4, "stroke-dasharray": 8 }); 

 body { font: 12px Arial; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

EDIT: If you want to draw only two lines, at the thresholds, you have to pass their values to data , not the scale ticks:

.data(Object.values(thresholdValues))

Here is the demo:

 var margin = { top: 30, right: 20, bottom: 30, left: 50 }; var thresholdValues = { minValue: 40, maxValue: 85 }; var width = 600 - margin.left - margin.right; var height = 270 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); var valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Get the data var data = [{ date: "1-May-12", close: "58.13" }, { date: "30-Apr-12", close: "53.98" }, { date: "27-Apr-12", close: "67.00" }, { date: "26-Apr-12", close: "89.70" }, { date: "25-Apr-12", close: "99.00" }]; data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, 100]); svg.append("path") // Add the valueline path. .attr("d", valueline(data)); svg.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); svg.selectAll("line.horizontalGrid").data(Object.values(thresholdValues)).enter() .append("line") .attr({ "class": "horizontalGrid", "x1": margin.right, "x2": width - margin.right, "y1": function(d) { if (d != 0) { return y(d); } }, "y2": function(d) { if (d != 0) { return y(d); } }, "fill": "none", "shape-rendering": "crispEdges", "stroke": "grey", "stroke-width": "2px", "opacity": 0.4, "stroke-dasharray": 8 }); 

 path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } 

 <script src="https://d3js.org/d3.v3.js"></script>