Javascript D3.JS垂直线分隔年

您好，我在使用D3.JS时遇到了一些困难，我需要插入一条分隔两列的垂直虚线。x轴是一个日期，我试图在新年开始时插入这条线

具有完整Javascript的Fiddle链接：

我当前用于打印图形的代码如下：

HTML:

巴达塔

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

                }

---

这是我将采取的方法

• 从您的秤上获取最早和最新的日期
• 每一个都有一年的时间
• 生成一个范围，从最早的一年（因为这是第一个分隔符所在的位置）到最后一年
• 将此范围传递到

  .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

属性设置为使其显示为虚线。完整示例。

请同时粘贴您的html。（使用我们自己的所有类编写html将非常耗时）更新代码，对于缺少信息表示抱歉，感谢您的时间。希望HTML块足够了。你的

barData

是什么？你能添加小提琴吗？我已经发布了barData代码，我不太清楚它是如何工作的，我对Javascript的理解是有限的。但是这应该可以检索X轴的日期值。嗨，Thank，非常感谢。这个例子对我来说几乎是完美的。但我很难适应我的情况。我可以从我的数据中得到年份，但我无法将其打印到图表中。我已将我的全部代码上载到。我有3种类型的图形条、线和两者。你的JSFIDLE不适合我。不过看起来应该能用。到底是什么不起作用？好吧，它现在开始打印，所以这是一个进步！我不知道为什么它没有打印出来。现在我只需要了解如何为X选择正确的值。我真的不需要为年份分隔符插入新的勾号，我可以使用出现的年份的第一个条目。这个JSFIDLE现在应该显示了，您提供的代码更改位于：HTML:line 280 Javascript代码：line 316458非常感谢您的麻烦。您的新JSFIDLE对我也不起作用，但看起来您没有使用我发布的代码——看看分隔行的x位置是如何计算的。

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

                }

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

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