Question

你好我对D3.JS有些困难，我需要插入一条分隔两列的垂直虚线。 x轴是一个日期，我试图在新的一年开始时插入该行。

使用完整的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);
                            });
                       }

barData

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));
                        });

Answer 1

这是我采取的方法。

从您的比例中获取最早和最晚的日期。
获取每一年的年份。
生成从最早的年份（因为那是你的第一个分隔符所在的位置）到最后一个的范围。
将此范围传递给.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属性设置为使其显示为虚线。完整示例here。

D3.JS垂直线分离年份

更新：谢谢@Lars Kotthoff，此刻它的工作几近完美！我对Js知之甚少，所以我花了一段时间才使它工作

1 个答案: