1
私は数日前にd3.jsに慣れ始めました。運が良ければ、図書館は数週間前に大きな更新を受け、多くの既存の資料は古くなっています。私は私が計画していたことの大部分をやり遂げましたが、今では "グリッドを置いている"という部分に固執しています。d3.js 4.0 - 中心軸を持つ線チャートのグリッド線
"tickメソッド"を使って新しい行を描画しようとしました。グリッド線を使ってグラフを検索して、どのように動作しているかなどを確認しました。メソッドの名前が変更されていますが、ドキュメントをよく理解するとは限らないため、少し難解です。誰かがそんなに親切で私を正しい方向に向けることができたら、本当に感謝します。 :)
私は「中心軸」の意味を説明するために、私のコードを以下に載せました（どちらも実際にはあります）。
// Data
// Path data
var contractHighRange = [
\t { "x" : -6, "y" : 0.5 },
\t { "x" : -5, "y" : 0.1 },
\t { "x" : -4, "y" : 0.1 },
\t { "x" : -2, "y" : 0.2 },
\t { "x" : -1, "y" : 0.1 },
\t { "x" : 0, "y" : -0.1 },
\t { "x" : 1, "y" : -0.2 },
\t { "x" : 2, "y" : -0.1 },
\t { "x" : 3, "y" : -0.2 },
\t { "x" : 4, "y" : 0.2 },
\t { "x" : 5, "y" : 0.4 },
\t { "x" : 6, "y" : 0.5 }
];
var contractLowRange = [
\t { "x" : -6, "y" : 0.3 },
\t { "x" : -5, "y" : -0.1 },
\t { "x" : -4, "y" : -0.1 },
\t { "x" : -2, "y" : 0 },
\t { "x" : -1, "y" : -0.1 },
\t { "x" : 0, "y" : -0.3 },
\t { "x" : 1, "y" : -0.4 },
\t { "x" : 2, "y" : -0.3 },
\t { "x" : 3, "y" : -0.4 },
\t { "x" : 4, "y" : 0 },
\t { "x" : 5, "y" : 0.2 },
\t { "x" : 6, "y" : 0.3 }
];
var contractMiddleRange = [
\t { "x" : -6, "y" : 0.4 },
\t { "x" : -5, "y" : 0 },
\t { "x" : -4, "y" : 0 },
\t { "x" : -2, "y" : 0.1 },
\t { "x" : -1, "y" : 0 },
\t { "x" : 0, "y" : -0.2 },
\t { "x" : 1, "y" : -0.3 },
\t { "x" : 2, "y" : -0.2 },
\t { "x" : 3, "y" : -0.3 },
\t { "x" : 4, "y" : 0.1 },
\t { "x" : 5, "y" : 0.3 },
\t { "x" : 6, "y" : 0.4 }
];
// Axis definition
var contractInformationForAxis = [
\t { "name" : "abscissa", "x" : -6, "y" : 6},
\t { "name" : "ordinate", "x" : -0.8, "y" : 0.8}
];
var contractInformationForScatterpoints = [
\t { "name" : "qM", "x" : -5.25, "y" : 0.1 },
\t { "name" : "uM", "x" : 5, "y" : -3.5 },
\t { "name" : "uSMi", "x" : -2.75, "y" : 0 },
\t { "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 =
\t d3.select("body")
\t \t .append("svg")
\t \t \t .attr("width", width + margin.left + margin.right)
\t \t \t .attr("height", height + margin.top + margin.bottom)
\t \t .append("g")
\t \t \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Axis creation
var xAxisScale =
\t d3.scaleLinear()
\t \t .domain([
\t \t \t contractInformationForAxis[0].x,
\t \t \t contractInformationForAxis[0].y])
\t \t .range([0, width]);
var yAxisScale =
\t d3.scaleLinear()
\t \t .domain([
\t \t \t contractInformationForAxis[1].x,
\t \t \t contractInformationForAxis[1].y])
\t \t .range([height, 0]);
// Axis generation
var xAxisGroup =
\t svgContainer
\t \t .append("g")
\t \t \t .attr("transform", "translate(0," + (height/2) + ")")
\t \t \t .call(d3.axisBottom(xAxisScale));
var yAxisGroup =
\t svgContainer
\t \t .append("g")
\t \t \t .attr("transform", "translate(" + width/2 + ", 0)")
\t \t \t .call(d3.axisLeft(yAxisScale));
// Noms des axes
var xAxisName =
\t svgContainer
\t .append("text")
\t \t .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top) + ")")
\t \t .attr("class", "xAxisName")
\t \t .text("xAxis");
var yAxisName =
\t svgContainer
\t .append("text")
\t \t .attr("y", 0 - margin.left)
\t \t .attr("x", 0 - (height/2))
\t \t .attr("dy", "1em")
\t \t .attr("class", "yAxisName")
\t \t .text("yAxis");
// Lines creation
var lineFunction =
\t d3.line()
\t \t .x(function(d) { return xAxisScale(d.x); })
\t \t .y(function(d) { return yAxisScale(d.y); })
\t \t .curve(d3.curveLinear);
// Lines generation
var contractHighRangePath =
\t svgContainer
\t \t .append("path")
\t \t \t .attr("d", lineFunction(contractHighRange))
\t \t \t .attr("class", "lineHighRange");
var contractLowRangePath =
\t svgContainer
\t \t .append("path")
\t \t \t .attr("d", lineFunction(contractLowRange))
\t \t \t .attr("class", "lineLowRange");
var contractMiddleRangePath =
\t svgContainer
\t \t .append("path")
\t \t \t .attr("d", lineFunction(contractMiddleRange))
\t \t \t .attr("class", "lineMiddleRange");
// SCATTERPOINTS
var contractPointsCreation =
\t svgContainer
\t \t .selectAll("dot")
\t \t .data(contractInformationForScatterpoints)
\t \t .enter()
\t \t .append("g");
// Generate scatterplots
var contractPointsGeneration =
\t contractPointsCreation
\t \t .append("circle")
\t \t \t .attr("r", 10)
\t \t \t .attr("cx", function(d) { return xAxisScale(d.x); })
\t \t \t .attr("cy", function(d) { return yAxisScale(d.y); })
\t \t \t .attr("class", "exteriorCircle");
var contractPointsText =
\t contractPointsCreation
\t \t .selectAll("text")
\t \t .data(contractInformationForScatterpoints)
\t \t .enter();
var contractPointsTextAttributes =
\t contractPointsText
\t \t .append("text")
\t \t \t .attr("x", function(d) { return xAxisScale(d.x); })
\t \t \t .attr("y", function(d) { return yAxisScale(d.y) + margin.top/2.5; })
\t \t \t .attr("class", "contractPointsText")
\t \t \t .text(function(d) { return "(" + d.name + " " + d.x + ", " + d.y + ")"});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;
}<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>
ちょうどそれを-とテストそれは非常にうまく機能！良い実装、私はそれが非常にきれいだと思う。ありがとうございました！ :) –