D3.js 在dc.js系列图表中为d3.time.scale（）添加自定义记号/标记

我想为日期轴的特定日期添加一个标记。请看下面的折线图

我的xAxis由该函数绘制，其中dateMin和dateMax可由用户通过前端（或画笔等）进行设置

这意味着这些值是自动计算的

现在，我们的数据有一个固定的截止日期。例如，我们可能有截至2014年1月31日的合并数据，然后是2014年2月1日以后的预测数据

我需要做的是在视觉上明确截止日期。我在下面的JPG中手工绘制了一条红色垂直线。但是我如何用d3编程实现这一点呢

一个警告是，用户可以选择一个日期范围（使用刷子等），该范围不包括截止日期（例如，2014年1月1日至2014年1月20日）。在这种情况下，不应绘制任何线

如果可能的话，如果从截止日期开始，折线图的实际线条看起来会有所不同，那就更好了。它们可以是点状的，而不是实心的，或者它们的颜色可以不太饱和（.brighter？），以便在视觉上清楚地表明基础数据尚未整合

谢谢你给我的任何提示

很抱歉，我还不能将图像发布到StackOverflow，因此我将示例上传到这里：

从答案中尝试代码

使用下面的代码，绘制线条和标签，但不是在给定的x值（截止日期），而是在时间尺度上太早了，大约在2014-01-29的晚上

        var cutoffDate = new Date("2014-02-01T00:00:00Z");

        seriesChart.svg().append("svg:line")
                .attr("x1", xScale(cutoffDate))
                .attr("x2", xScale(cutoffDate))
                .attr("y1", yScale.range()[1])
                .attr("y2", yScale.range()[0])
                .style("stroke", "rgb(225,0,0)")
                .style("stroke-width", "1");

        seriesChart.svg()
                .append("text")
                .attr("text-anchor", "start")
                .attr("x", xScale(cutoffDate))
                .attr("y", 80)
                .text("Projected data");

请参见此处的结果：

在我最初的问题中，我没有提到我正在使用dc.js中的seriescart： 我想这会在xScale构成seriesChart时影响xScale，因此稍后在xScale上设置一个值将导致显示移位。我们将进一步调查

更新：x位置固定

将svg元素附加到dc.js图表的正确方法是不使用

chart.svg().append()

但是

---

这将修复添加到图表中的自定义元素的位置偏移。将其与Lars的答案结合使用是可行的。

这在一个轴上很难实现，但在单独的轴上很容易实现。首先，对于分隔线，可以使用如下代码：

svg.append("line")
   .attr("x1", xScale(cutoffDate))
   .attr("x2", xScale(cutoffDate))
   .attr("y1", yScale.range()[0])
   .attr("y2", yScale.range()[1]);
svg.append("text").attr("x", xScale(cutoffDate) + 10).attr("y", yCoord)
   .text("projected");

要具有不同的样式，请使用两个不同的轴：

var xScale1 = d3.time.scale().domain([..., cutoffDate]).range([0, 100]),
    xScale2 = d3.time.scale().domain([cutoffDate, ...]).range([100, 200]);
svg.append("g").attr("class", "before")
    .call(d3.svg.axis().scale(xScale1));
svg.append("g").attr("class", "after")
   .attr("transform", "translate(" + xScale1.range()[1] + ",0)")
   .call(d3.svg.axis().scale(xScale2));

附加后，可以使用类或通过选择单个DOM元素来设置轴的样式。这意味着您将得到两个刻度——为了更方便地使用它们计算坐标，您可以将它们包装起来：

var xScale = function(x) { return x < cutoffDate ? xScale1(x) : xScale2(x); };

var xScale=function（x）{return x

---

实现这一点的确切最佳方法取决于您的具体应用程序，但以上内容应为您提供一个大致的指导。

Lars，感谢您提供代码。现在，我能够测试线条和文本绘图代码。它在某种程度上起作用，但由于某些原因，x（日期）值不正确。我怀疑这与我在d3上使用dc.js框架绘制序列图（我想在这个项目中使用dc.js的交叉过滤函数）有关。我对我的问题进行了解释。我的猜测是，你需要添加图表区域与你从刻度中获得的值的偏移量。如果你能发布你正在使用的代码，那会很有帮助。你猜对了，引导我走上了正确的道路。dc.js应用边距。如果我将这些设置为0，那么将在正确的x位置绘制直线。但我想知道如何在给定的画布中绘制，包括边距，而不必计算边距并在代码中添加幻数。您需要将线条附加到图表绘图区域。谢谢。我可以从图表对象中读取左边距，并将其添加到线条的xScale中，它就可以工作了。明天我将报告关于使用两个x轴的第二部分。

var xScale1 = d3.time.scale().domain([..., cutoffDate]).range([0, 100]),
    xScale2 = d3.time.scale().domain([cutoffDate, ...]).range([100, 200]);
svg.append("g").attr("class", "before")
    .call(d3.svg.axis().scale(xScale1));
svg.append("g").attr("class", "after")
   .attr("transform", "translate(" + xScale1.range()[1] + ",0)")
   .call(d3.svg.axis().scale(xScale2));

var xScale = function(x) { return x < cutoffDate ? xScale1(x) : xScale2(x); };