您好，我在使用 D3 时遇到了一些困难.JS，我需要插入一条垂直虚线分隔两列。x 轴是一个日期，我试图在新年开始时插入该行。
Fiddle link with full Javascript：http：//jsfiddle.net/GAv9y/
我目前打印图形的代码如下：
.HTML：
<div id="Panel-reports-graph" class="PanelTpl-reports grid_12 rounded-corners">
<h1 class="rounded-corners">Changes Historical Graphic</h1>
<div class="narrow_2">
<div id="Widget75-Loading" class="Loading-div" align="center" style="display: none;">
<div id="Widget75" class="Widget-Tpl-graph" align="center">
<style type="text/css">
<script type="text/javascript">
<div id="dropdown-container">
<ul id="75" class="graph-dropdown" rel="0">
</div>
<script type="text/javascript">
initDropdown();
</script>
<div id="graph-27">
<svg width="900" height="350">
</div>
</div>
</div>
<script>
</div>
Java 脚本：
var barGroup = graph.append("g")
.attr("class", "bars")
.selectAll(".bar-group")
.data(barData)
.enter().append("g")
.attr("class", "bar-group")
.attr("transform", function(d) {
return "translate(" + x0(d.date) + ",0)";
});
if (options.other.stackedbar == "true") {
var bar = barGroup.selectAll("rect")
.data(function(d) {
return d.values;
})
.enter().append("rect")
.attr("width", x0.rangeBand())
.attr("x", function(d) {
return x1(d.date);;
})
.attr("y", function(d) {
return y(d.aggr);
})
.attr("height", function(d) {
return height - y(d.value);
})
.style("fill", function(d) {
return color(d.serie);
});
}
酒吧数据
var data = [],
lineData = [],
barData = [];
for (var i = 0; i < json.abscisa.length; i++) {
var serieName,
length = 0;
var row = {
date: isNaN(Date.parse(json.abscisa[i])) ? json.abscisa[i] : d3.time.format("%Y-%m-%d").parse(json.abscisa[i])
};
var barRow = {
date: isNaN(Date.parse(json.abscisa)) ? json.abscisa[i] : d3.time.format("%Y-%m-%d").parse(json.abscisa[i])
};
var lineRow = {
date: isNaN(Date.parse(json.abscisa)) ? json.abscisa[i] : d3.time.format("%Y-%m-%d").parse(json.abscisa[i])
};
for (var j = 0; j < json.series.length; j++) {
serieName = json.series[j];
row[serieName] = json[serieName].data[i];
switch (json[serieName].metadata.align) {
case 'V':
barRow[serieName] = json[serieName].data[i];
break;
default:
lineRow[serieName] = json[serieName].data[i];
break;
}
}
data.push(row);
length = 0;
for (key in lineRow)
length++;
if (length > 1)
lineData.push(lineRow);
length = 0;
for (key in barRow)
length++;
if (length > 1)
barData.push(barRow);
}
更新：谢谢@Lars Kotthoff，它目前几乎完美！我对 Js 了解得很少，所以我花了一段时间才让它工作
对于折线图形，它可以完美地工作，但对于条形图，线条会向左移动。有人告诉我，如果有人知道它是什么，应该有一个选项将其居中？？
下面的代码块：
var time = d3.time.format("%Y %m %d"),
xscale = d3.time.scale()
.domain(d3.extent(data, function(d) {
return d.date;
}))
.range([0, width]),
yscale = d3.scale.linear()
.domain(d3.extent(data, function(d) {
return d[1];
}))
.range([height, 0]);
var startEnd = xscale.domain().map(function(d) {
return d.getFullYear();
}),
years = d3.range(startEnd[0] + 1, startEnd[1] + 1);
graph.selectAll(".divide").data(years)
.enter().append("line")
.attr("class", "divide")
.attr("opacity","1")
.style("stroke-dasharray", "3,3")
.attr("y1", yscale.range()[0])
.attr("y2", yscale.range()[1])
.attr("x1", function(d) {
return xscale(new Date(d, 0));
})
.attr("x2", function(d) {
return xscale(new Date(d, 0));
});
这是我会采取的方法。
- 从体重秤中获取最早和最晚的日期。
- 获取每个年份。
- 生成一个范围，从最早的一年（因为这是你的第一个分隔符的位置）到最后一年。
- 将此范围传递给
.data()并绑定到行。
在代码中，这看起来像这样，假设xscale是你的时间刻度，yscale y 轴的刻度。
var startEnd = xscale.domain().map(function(d) { return d.getFullYear(); }),
years = d3.range(startEnd[0]+1, startEnd[1]+1);
svg.selectAll(".divide").data(years)
.enter().append("line")
.attr("class", "divide")
.style("stroke-dasharray", "1,1")
.attr("y1", yscale.range()[0])
.attr("y2", yscale.range()[1])
.attr("x1", function(d) { return xscale(new Date(d, 0)); })
.attr("x2", function(d) { return xscale(new Date(d, 0)); });
stroke-dasharray属性设置为使其显示为虚线。此处提供完整示例。