d3-在基于y坐标的位置绘制网格线？ [英] d3-Draw grid line at a location based on the y coordinates?

问题描述

我是d3.js的新手，想要根据y坐标值绘制水平网格线 小提琴 ，我已尝试在y1和y2位置使用if条件，但线条在图表顶部重叠。

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.

非常感谢任何帮助。

推荐答案

您的 if 语句对我来说没什么意义：

Your if statement makes little sense to me:

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

这意味着只有当屏幕上的值完全<$ c $时c> thresholdValues.minValue （代码中 40 ）该行将被绘制。

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.

解决方案：删除 if 语句。实际上，我保留 if 只是为了避免x轴上的第一个网格线：

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

以下是您更改的代码：

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>

编辑：如果你只想绘制两条线，在阈值处，你必须将它们的值传递给数据，而不是比例滴答：

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

以下是演示：

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>

这篇关于d3-在基于y坐标的位置绘制网格线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！