如何在d轴上显示d轴上第1点的数据，以及d3.js中的折线图
如上图所示，折线图在y轴和数据之间有一些差距。图表和日期应从图表的交叉点开始。第一个日期应显示在交叉点（在y轴上为0开始）如何在d3.js（v3版本）中删除交叉点和第一个日期之间的间隙。
我无法找到合适的轴，请帮助我走出这个.. 这是我的代码
的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 个答案:
答案 0 :(得分：0)
我做了一些小改动，但它们都是围绕创建xscale的方式。 d3 v3有一个d3.time.scale（），这对于这类事情很有用。所以我将你的x比例切换到那个，并将你的年份值解析为日期对象。我还在您的xscale域创建中添加了single.php，这有助于添加开始和结束标记。
.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>的{p> Here is a fiddle略胜一筹。我将nice传递给了d3.time.days。最右边有一个勾号的原因是nice rounds the extents，最后一个数据点略高于天数。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？