d3.js 4.0 - 具有中心轴的折线图的网格线

Question

我几天前开始熟悉d3.js。幸运的是，几周前图书馆经历了一次重大更新，现在许多现有资源都已过时。我已经设法完成了我计划中的大部分工作，但现在我已经把它放在网格线上了＃34;部分。

我试图使用＆＃34; tick方法，＆＃34;绘制新线条，用网格线搜索图形以查看它们是如何工作的，等等都无济于事。方法改变了名称，我并不总是很好地理解文档，所以它有点难。如果有人能够指出我正确的方向，我真的很感激。 ：）

我已经将我的代码放在下面以说明我的意思＆＃34;居中的轴＆＃34; （实际上两者都是。）

＆＃13;

＆＃13;

// Data
// Path data
var contractHighRange =    [
	{ "x" : -6, "y" : 0.5 },
	{ "x" : -5, "y" : 0.1 },
	{ "x" : -4, "y" : 0.1 },
	{ "x" : -2, "y" : 0.2 },
	{ "x" : -1, "y" : 0.1 },
	{ "x" : 0,  "y" : -0.1 },
	{ "x" : 1,  "y" : -0.2 },
	{ "x" : 2,  "y" : -0.1 },
	{ "x" : 3,  "y" : -0.2 },
	{ "x" : 4,  "y" : 0.2 },
	{ "x" : 5,  "y" : 0.4 },
	{ "x" : 6,  "y" : 0.5 }
];

var contractLowRange =    [
	{ "x" : -6, "y" : 0.3 },
	{ "x" : -5, "y" : -0.1 },
	{ "x" : -4, "y" : -0.1 },
	{ "x" : -2, "y" : 0 },
	{ "x" : -1, "y" : -0.1 },
	{ "x" : 0,  "y" : -0.3 },
	{ "x" : 1,  "y" : -0.4 },
	{ "x" : 2,  "y" : -0.3 },
	{ "x" : 3,  "y" : -0.4 },
	{ "x" : 4,  "y" : 0 },
	{ "x" : 5,  "y" : 0.2 },
	{ "x" : 6,  "y" : 0.3 }
];

var contractMiddleRange =    [
	{ "x" : -6, "y" : 0.4 },
	{ "x" : -5, "y" : 0 },
	{ "x" : -4, "y" : 0 },
	{ "x" : -2, "y" : 0.1 },
	{ "x" : -1, "y" : 0 },
	{ "x" : 0,  "y" : -0.2 },
	{ "x" : 1,  "y" : -0.3 },
	{ "x" : 2,  "y" : -0.2 },
	{ "x" : 3,  "y" : -0.3 },
	{ "x" : 4,  "y" : 0.1 },
	{ "x" : 5,  "y" : 0.3 },
	{ "x" : 6,  "y" : 0.4 }
];

// Axis definition
var contractInformationForAxis = [
	{ "name" : "abscissa",      "x" : -6,    "y" : 6},
	{ "name" : "ordinate",      "x" : -0.8,  "y" : 0.8}
];

var contractInformationForScatterpoints = [
	{ "name" : "qM",       "x" : -5.25,    "y" : 0.1 },
	{ "name" : "uM",       "x" : 5,        "y" : -3.5 },
	{ "name" : "uSMi",     "x" : -2.75,    "y" : 0 },
	{ "name" : "uSMa",     "x" :  3.75,    "y" : 0 }
];

// General appearance
var margin = { top: 50, right: 50, bottom: 50, left: 50 };
var width = 1000 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

// Main SVG
var svgContainer =
	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 + ")");

// Axis creation
var xAxisScale =
	d3.scaleLinear()
		.domain([
			contractInformationForAxis[0].x,
			contractInformationForAxis[0].y])
		.range([0, width]);

var yAxisScale =
	d3.scaleLinear()
		.domain([
			contractInformationForAxis[1].x,
			contractInformationForAxis[1].y])
		.range([height, 0]);

// Axis generation
var xAxisGroup =
	svgContainer
		.append("g")
			.attr("transform", "translate(0," + (height / 2) + ")")
			.call(d3.axisBottom(xAxisScale));

var yAxisGroup =
	svgContainer
		.append("g")
			.attr("transform", "translate(" + width / 2 + ", 0)")
			.call(d3.axisLeft(yAxisScale));

// Noms des axes
var xAxisName =
	svgContainer
	.append("text")
		.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top) + ")")
		.attr("class", "xAxisName")
		.text("xAxis");

var yAxisName =
	svgContainer
	.append("text")
		.attr("y", 0 - margin.left)
		.attr("x", 0 - (height / 2))
		.attr("dy", "1em")
		.attr("class", "yAxisName")
		.text("yAxis");

// Lines creation
var lineFunction =
	d3.line()
		.x(function(d) { return xAxisScale(d.x); })
		.y(function(d) { return yAxisScale(d.y); })
		.curve(d3.curveLinear);

// Lines generation
var contractHighRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractHighRange))
			.attr("class", "lineHighRange");

var contractLowRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractLowRange))
			.attr("class", "lineLowRange");

var contractMiddleRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractMiddleRange))
			.attr("class", "lineMiddleRange");

// SCATTERPOINTS
var contractPointsCreation =
	svgContainer
		.selectAll("dot")
		.data(contractInformationForScatterpoints)
		.enter()
		.append("g");

// Generate scatterplots
var contractPointsGeneration =
	contractPointsCreation
		.append("circle")
			.attr("r", 10)
			.attr("cx", function(d) { return xAxisScale(d.x); })
			.attr("cy", function(d) { return yAxisScale(d.y); })
			.attr("class", "exteriorCircle");

var contractPointsText =
	contractPointsCreation
		.selectAll("text")
		.data(contractInformationForScatterpoints)
		.enter();

var contractPointsTextAttributes =
	contractPointsText
		.append("text")
			.attr("x", function(d) { return xAxisScale(d.x); })
			.attr("y", function(d) { return yAxisScale(d.y) + margin.top / 2.5; })
			.attr("class", "contractPointsText")
			.text(function(d) { return "(" + d.name + " " + d.x + ", " + d.y + ")"});

＆＃13;

h1 {
  color: darkgreen;
}

.lineHighRange {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.lineLowRange {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.lineMiddleRange {
  fill: none;
  stroke: orange;
  stroke-width: 2px;
}

.exteriorCircle {
  fill: darkred;
}

.contractPointsText{
  text-anchor: middle;
  font-family: sans-serif;
  font-size: 12px;
}

.yAxisName {
  text-anchor: middle;
  transform: rotate(-90deg);
}

.xAxisName {
  text-anchor: middle;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<title>Linechart</title>


<body>

  <h1>Demo - d3 4.0</h1>

  <script src="js/chart.js"></script>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我们可以在每个刻度线附加行，而不是更改D3轴刻度。

首先，我们为每个轴（xAxis和yAxis）设置类。然后，我们选择每个轴的刻度线（d3.selectAll("g.yAxis g.tick")和d3.selectAll("g.xAxis g.tick")）并在每个刻度线上添加一条线。

我设置了一个类＆＃34; gridline＆＃34;这些线。使用CSS来改变它们的不透明度，颜色，样式等。

检查下面的代码段。

＆＃13;

＆＃13;

// Data
// Path data
var contractHighRange =    [
	{ "x" : -6, "y" : 0.5 },
	{ "x" : -5, "y" : 0.1 },
	{ "x" : -4, "y" : 0.1 },
	{ "x" : -2, "y" : 0.2 },
	{ "x" : -1, "y" : 0.1 },
	{ "x" : 0,  "y" : -0.1 },
	{ "x" : 1,  "y" : -0.2 },
	{ "x" : 2,  "y" : -0.1 },
	{ "x" : 3,  "y" : -0.2 },
	{ "x" : 4,  "y" : 0.2 },
	{ "x" : 5,  "y" : 0.4 },
	{ "x" : 6,  "y" : 0.5 }
];

var contractLowRange =    [
	{ "x" : -6, "y" : 0.3 },
	{ "x" : -5, "y" : -0.1 },
	{ "x" : -4, "y" : -0.1 },
	{ "x" : -2, "y" : 0 },
	{ "x" : -1, "y" : -0.1 },
	{ "x" : 0,  "y" : -0.3 },
	{ "x" : 1,  "y" : -0.4 },
	{ "x" : 2,  "y" : -0.3 },
	{ "x" : 3,  "y" : -0.4 },
	{ "x" : 4,  "y" : 0 },
	{ "x" : 5,  "y" : 0.2 },
	{ "x" : 6,  "y" : 0.3 }
];

var contractMiddleRange =    [
	{ "x" : -6, "y" : 0.4 },
	{ "x" : -5, "y" : 0 },
	{ "x" : -4, "y" : 0 },
	{ "x" : -2, "y" : 0.1 },
	{ "x" : -1, "y" : 0 },
	{ "x" : 0,  "y" : -0.2 },
	{ "x" : 1,  "y" : -0.3 },
	{ "x" : 2,  "y" : -0.2 },
	{ "x" : 3,  "y" : -0.3 },
	{ "x" : 4,  "y" : 0.1 },
	{ "x" : 5,  "y" : 0.3 },
	{ "x" : 6,  "y" : 0.4 }
];

// Axis definition
var contractInformationForAxis = [
	{ "name" : "abscissa",      "x" : -6,    "y" : 6},
	{ "name" : "ordinate",      "x" : -0.8,  "y" : 0.8}
];

var contractInformationForScatterpoints = [
	{ "name" : "qM",       "x" : -5.25,    "y" : 0.1 },
	{ "name" : "uM",       "x" : 5,        "y" : -3.5 },
	{ "name" : "uSMi",     "x" : -2.75,    "y" : 0 },
	{ "name" : "uSMa",     "x" :  3.75,    "y" : 0 }
];

// General appearance
var margin = { top: 50, right: 50, bottom: 50, left: 50 };
var width = 1000 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

// Main SVG
var svgContainer =
	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 + ")");

// Axis creation
var xAxisScale =
	d3.scaleLinear()
		.domain([
			contractInformationForAxis[0].x,
			contractInformationForAxis[0].y])
		.range([0, width]);

var yAxisScale =
	d3.scaleLinear()
		.domain([
			contractInformationForAxis[1].x,
			contractInformationForAxis[1].y])
		.range([height, 0]);

// Axis generation
var xAxisGroup =
	svgContainer
		.append("g")
        .attr("class", "xAxis")
			.attr("transform", "translate(0," + (height / 2) + ")")
			.call(d3.axisBottom(xAxisScale));

var yAxisGroup =
	svgContainer
		.append("g")
        .attr("class", "yAxis")
			.attr("transform", "translate(" + width / 2 + ", 0)")
			.call(d3.axisLeft(yAxisScale));

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

// Noms des axes
var xAxisName =
	svgContainer
	.append("text")
		.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top) + ")")
		.attr("class", "xAxisName")
		.text("xAxis");

var yAxisName =
	svgContainer
	.append("text")
		.attr("y", 0 - margin.left)
		.attr("x", 0 - (height / 2))
		.attr("dy", "1em")
		.attr("class", "yAxisName")
		.text("yAxis");

// Lines creation
var lineFunction =
	d3.line()
		.x(function(d) { return xAxisScale(d.x); })
		.y(function(d) { return yAxisScale(d.y); })
		.curve(d3.curveLinear);

// Lines generation
var contractHighRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractHighRange))
			.attr("class", "lineHighRange");

var contractLowRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractLowRange))
			.attr("class", "lineLowRange");

var contractMiddleRangePath =
	svgContainer
		.append("path")
			.attr("d", lineFunction(contractMiddleRange))
			.attr("class", "lineMiddleRange");

// SCATTERPOINTS
var contractPointsCreation =
	svgContainer
		.selectAll("dot")
		.data(contractInformationForScatterpoints)
		.enter()
		.append("g");

// Generate scatterplots
var contractPointsGeneration =
	contractPointsCreation
		.append("circle")
			.attr("r", 10)
			.attr("cx", function(d) { return xAxisScale(d.x); })
			.attr("cy", function(d) { return yAxisScale(d.y); })
			.attr("class", "exteriorCircle");

var contractPointsText =
	contractPointsCreation
		.selectAll("text")
		.data(contractInformationForScatterpoints)
		.enter();

var contractPointsTextAttributes =
	contractPointsText
		.append("text")
			.attr("x", function(d) { return xAxisScale(d.x); })
			.attr("y", function(d) { return yAxisScale(d.y) + margin.top / 2.5; })
			.attr("class", "contractPointsText")
			.text(function(d) { return "(" + d.name + " " + d.x + ", " + d.y + ")"});

＆＃13;

h1 {
  color: darkgreen;
}

.lineHighRange {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.lineLowRange {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.lineMiddleRange {
  fill: none;
  stroke: orange;
  stroke-width: 2px;
}

.exteriorCircle {
  fill: darkred;
}

.contractPointsText{
  text-anchor: middle;
  font-family: sans-serif;
  font-size: 12px;
}

.yAxisName {
  text-anchor: middle;
  transform: rotate(-90deg);
}

.xAxisName {
  text-anchor: middle;
}

.gridline{
stroke: black;
shape-rendering: crispEdges;
stroke-opacity: .2;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<title>Linechart</title>


<body>

  <h1>Demo - d3 4.0</h1>

  <script src="js/chart.js"></script>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;