如何在d3.js中显示折线图中y轴上单词的第一个点的数据
[英]how to display data from 1st point on words on y axis for line chart in d3.js
问题描述
As shown in the above image, line chart taking some gap between y axis and data. 
如上图所示，折线图占据了y轴和数据之间的一些间隙。 graph and date should start from intersection point of the chart. 图形和日期应从图表的交点开始。 1st date should display at intersection point(as 0 starts in y-axis) How to remove the gap between intersection point and 1st date in d3.js(v3 version). 第一个日期应显示在交点处（从y轴开始为0）如何删除d3.js（v3版本）中的交点和第一个日期之间的距离。
I am unable to find the proper axis, please help me to come out of this.. here is my code 我找不到合适的轴，请帮助我解决这个问题。这是我的代码
index.html 的index.html
<!DOCTYPE html> <meta charset="utf-8"> <style> body { background-color: #F1F3F3 } .axis { font: 10px sans-serif; } .bar1 { font-size: 12px; color: black; } .axis path, .axis line { fill: none; stroke: black; stroke-width: 1px; shape-rendering: crispEdges; } .line { fill: none; /* stroke-width: 2px;*/ } .line1 { fill: none; } .overlay { fill: none; pointer-events: all; } .area1 { fill: steelblue; } .legend { border: 2px solid; } svg { border: 2px solid; margin-left: 90px; margin-top: 30px; } </style> <body> <div id="lineChart"></div> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var data = [{ "year": "01/01/2005 00:01", "value": 700, "value1": 1000 }, { "year": "01/02/2005 00:02", "value": 625, "value1": 1000 }, { "year": "01/03/2005 00:03", "value": 852, "value1": 1000 }, { "year": "01/04/2005 00:04", "value": 888, "value1": 1000 }, { "year": "01/05/2005 00:05", "value": 689, "value1": 1000 }, { "year": "01/06/2005 00:06", "value": 772, "value1": 1000 }, { "year": "01/07/2005 00:07", "value": 700, "value1": 1000 }, { "year": "01/08/2005 00:08", "value": 776, "value1": 1000 }, { "year": "01/09/2005 00:09", "value": 650, "value1": 1000 }, { "year": "01/10/2005 00:10", "value": 779, "value1": 1000 }, { "year": "01/11/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/12/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/13/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/13/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/14/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/15/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/16/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/17/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/18/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/19/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/20/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/21/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/22/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/23/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/24/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/25/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/26/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/27/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/28/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/29/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/30/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/31/2005 00:11", "value": 600, "value1": 1000 } ]; var margin = { top: 20, right: 20, bottom: 100, left: 30 }, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var color_hash = [{ "text": " Maximum Value", "color": "steelblue" }, { "text": "Consumed Value", "color": "yellow" }, ]; var x = d3.scale.ordinal().rangeRoundBands([0, 550]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(function(d) { return d3.time.format('%m/%d/%Y')(new Date(d)); });; var yAxis = d3.svg.axis() .scale(y) .orient("left"); var svg = d3.select("#lineChart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 80) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var line = d3.svg.line() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.value); }); var line1 = d3.svg.line() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.value1); }); var area = d3.svg.area() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y0(height) .y1(function(d) { return y(d.value); }); var area1 = d3.svg.area() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y0(height) .y1(function(d) { return y(d.value1); }); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); data.forEach(function(d) { d.year = d.year; d.value = +d.value; d.value1 = +d.value1; }); x.domain(data.map(function(d) { return d.year; })); y.domain([0, d3.max(data, function(d) { return d.value, d.value1 + 100; })]); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.9em") .attr("dy", "-.6em") .attr("transform", "rotate(-90)") svg.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 80) + ")") .style("text-anchor", "middle") .text("Year");; g.append("g") .attr("class", "axis axis--y") .call(yAxis) svg.append("text") .attr("transform", "rotate(-90)") .attr("y", margin.left - 70) .attr("x", 0 - (height / 2) - 20) .attr("dy", "2em") .style("text-anchor", "middle") .text("Values"); g.append("path") .datum(data) .attr("class", "line") .attr("d", line) .attr("stroke", "red") .attr("stroke-width", "1"); g.append("path") .datum(data) .attr("class", "line1") .attr("d", line1) .attr("stroke", "red") .attr("stroke-width", "1"); g.append("path") .data([data]) .attr("class", "area") .attr("d", area) .style("fill", "steelblue") .attr("opacity", 1); g.append("path") .data([data]) .attr("class", "area1") .attr("d", area1) .style("fill", "steelblue") .attr("opacity", .5); svg.append("text") .attr("x", (width / 2) + 20) .attr("y", 20 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Day Wise Power Consumption"); var legend = d3.select('svg').append('g') .attr("class", "legend") legend.selectAll('g') .data(color_hash) //hard coding the labels as the datset may have or may not have but legend should be complete. .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; }) .each(function(d, i) { var g = d3.select(this); g.append("rect") .attr("x", width - 300) .attr("y", 320) .attr("width", 18) .attr("height", 18) .attr("opacity", 0.7) .style("fill", function(d) { return d.color }); // draw legend text g.append("text") .attr("x", width - 165) .attr("y", 327) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d.text; }); }); g.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return y(d.value); }); g.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return y(d.value1); }); </script> </body> </html>
1 个解决方案
解决方案1
0 2018-03-13 21:44:20
I made a few small changes, but they were all around the way the xscale was created. 我做了一些小的更改，但是它们都是围绕xscale的创建方式进行的。 d3 v3 has a d3.time.scale() which is great for this sort of thing. d3 v3具有d3.time.scale（），对于此类事情非常有用。 So I switched your x scale to that, and parsed your year values into date objects. 因此，我将您的x比例转换为该比例，然后将您的年份值解析为日期对象。 I also added .nice() to your xscale domain creation which help to add starting and ending ticks. 我还向您的xscale域创建中添加了.nice() ，这有助于添加开始和结束刻度。
<!DOCTYPE html> <meta charset="utf-8"> <style> body { background-color: #F1F3F3 } .axis { font: 10px sans-serif; } .bar1 { font-size: 12px; color: black; } .axis path, .axis line { fill: none; stroke: black; stroke-width: 1px; shape-rendering: crispEdges; } .line { fill: none; /* stroke-width: 2px;*/ } .line1 { fill: none; } .overlay { fill: none; pointer-events: all; } .area1 { fill: steelblue; } .legend { border: 2px solid; } svg { border: 2px solid; margin-left: 90px; margin-top: 30px; } </style> <body> <div id="lineChart"></div> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var data = [{ "year": "01/01/2005 00:01", "value": 700, "value1": 1000 }, { "year": "01/02/2005 00:02", "value": 625, "value1": 1000 }, { "year": "01/03/2005 00:03", "value": 852, "value1": 1000 }, { "year": "01/04/2005 00:04", "value": 888, "value1": 1000 }, { "year": "01/05/2005 00:05", "value": 689, "value1": 1000 }, { "year": "01/06/2005 00:06", "value": 772, "value1": 1000 }, { "year": "01/07/2005 00:07", "value": 700, "value1": 1000 }, { "year": "01/08/2005 00:08", "value": 776, "value1": 1000 }, { "year": "01/09/2005 00:09", "value": 650, "value1": 1000 }, { "year": "01/10/2005 00:10", "value": 779, "value1": 1000 }, { "year": "01/11/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/12/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/13/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/13/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/14/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/15/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/16/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/17/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/18/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/19/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/20/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/21/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/22/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/23/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/24/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/25/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/26/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/27/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/28/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/29/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/30/2005 00:11", "value": 600, "value1": 1000 }, { "year": "01/31/2005 00:11", "value": 600, "value1": 1000 } ]; var margin = { top: 20, right: 20, bottom: 100, left: 30 }, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var color_hash = [{ "text": " Maximum Value", "color": "steelblue" }, { "text": "Consumed Value", "color": "yellow" }, ]; var x = d3.time.scale().range([0, 550]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(function(d) { return d3.time.format('%m/%d/%Y')(new Date(d)); }); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var svg = d3.select("#lineChart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom + 80) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var line = d3.svg.line() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.value); }); var line1 = d3.svg.line() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.value1); }); var area = d3.svg.area() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y0(height) .y1(function(d) { return y(d.value); }); var area1 = d3.svg.area() .interpolate("cardinal") .x(function(d) { return x(d.year); }) .y0(height) .y1(function(d) { return y(d.value1); }); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var timeFormat = d3.time.format("%m/%d/%Y %H:%M") data.forEach(function(d) { d.year = timeFormat.parse(d.year); d.value = +d.value; d.value1 = +d.value1; }); x.domain([d3.min(data, function(d){return +d.year}), d3.max(data, function(d){return +d.year})]).nice(); y.domain([0, d3.max(data, function(d) { return d.value, d.value1 + 100; })]); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.9em") .attr("dy", "-.6em") .attr("transform", "rotate(-90)") svg.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 80) + ")") .style("text-anchor", "middle") .text("Year");; g.append("g") .attr("class", "axis axis--y") .call(yAxis) svg.append("text") .attr("transform", "rotate(-90)") .attr("y", margin.left - 70) .attr("x", 0 - (height / 2) - 20) .attr("dy", "2em") .style("text-anchor", "middle") .text("Values"); g.append("path") .datum(data) .attr("class", "line") .attr("d", line) .attr("stroke", "red") .attr("stroke-width", "1"); g.append("path") .datum(data) .attr("class", "line1") .attr("d", line1) .attr("stroke", "red") .attr("stroke-width", "1"); g.append("path") .data([data]) .attr("class", "area") .attr("d", area) .style("fill", "steelblue") .attr("opacity", 1); g.append("path") .data([data]) .attr("class", "area1") .attr("d", area1) .style("fill", "steelblue") .attr("opacity", .5); svg.append("text") .attr("x", (width / 2) + 20) .attr("y", 20 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Day Wise Power Consumption"); var legend = d3.select('svg').append('g') .attr("class", "legend") legend.selectAll('g') .data(color_hash) //hard coding the labels as the datset may have or may not have but legend should be complete. .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; }) .each(function(d, i) { var g = d3.select(this); g.append("rect") .attr("x", width - 300) .attr("y", 320) .attr("width", 18) .attr("height", 18) .attr("opacity", 0.7) .style("fill", function(d) { return d.color }); // draw legend text g.append("text") .attr("x", width - 165) .attr("y", 327) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d.text; }); }); g.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return y(d.value); }); g.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 3) .attr("fill", "black") .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return y(d.value1); }); </script> </body> </html>
Here is a fiddle with nice being used slightly better. 这里是一个小提琴与nice使用略胜一筹。 I passed d3.time.days into .nice() . 我将d3.time.days传递给.nice() 。 The reason there is a tick on the far right is nice rounds the extents and the last data point is slightly over the day mark. 最右边打勾的原因是很好地对范围进行了四舍五入，而最后一个数据点则略微超过了日期标记。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
D3.js折线图，Y轴上的相对最小值和最大值 - D3.js Line chart with relative min and max in Y axis
d3.js中的双Y轴折线图，没有外部数据 - Dual Y axis line chart in d3.js without external data
如何在 D3.js 条形图中右侧对齐 y 轴？ - How to align y axis on right in D3.js bar chart?
如何从D3.js图表中读取（获取）Y轴比例值？ - How to read(get) Y-Axis Scale Values from D3.js Chart?
D3.js折线图轴 - D3.js line chart axis
D3.js如何从具有多个Y轴列的数据数组中提取Y域值 - D3.js how to extract Y domain value from data array with multiple Y axis columns
如何使用d3.js在折线图上的某个点显示图标 - How do I display an icon at a point on a line chart using d3.js
D3.js折线图y最高轴小于最高线 - D3.js line chart highest y axis smaller than highest line
D3.js-折线图不显示Y轴，X轴的比例不正确 - D3.js - Line graph does not display Y axis and scale of X axis is incorrect
如何在highChartjs的折线图中显示Y轴标签中的最后一个数据点值 - How to display last data point value in a tag on Y Axis in line chart of highChartjs
相关标签