javascript - D3 : Resizing x axis and repositioning circles

Question

我继承了一个显示时间轴事件的 D3 图表，事件显示为圆圈。 要建立 x 轴，页面使用以下内容，其中 show_date 是 csv 文件中的一列。

x.domain(d3.extent(data, function(d) { return d.show_date; }));

我需要能够更改时间线以显示从今天和接下来的 4 周、接下来的 3、6 和 12 个月开始的事件。我有一个调用函数的按钮

<input class="btn" id="weeks4" type="button" value="Next 4 weeks" onclick="timelineView(28);"/>

我创建的函数是

// n is the number of days to forward view
function timelineView(n) {

var days = n*24*60*60*1000;

x.domain([new Date(), new Date().getTime()+(days)]);
g.selectAll("g.x-axis")
    .transition()
    .duration(1750)
    .call(d3.axisTop(x));

svg.selectAll("circle")
    .data(MyData)
    .transition()
    .duration(1000)     
    .attr("cx", function(d) { return d.show_date; });
}

它成功地更改了 x 轴以查看正确的时间量，但所有圆圈都移到了图表的最左侧。当我检查一个圆圈时，我可以看到 cx 值是一个日期而不是一个数字。 在代码的其他地方，我发现这是图表首次加载时使用的内容

.attr("cx", function(d) { return d.data.x; })

所以我也尝试过使用它，但圆圈保持原样。如何使圆圈与更新的 x 轴内联移动？我也一直在玩 .exit() ，因为与图表首次加载时相比，要显示的圆圈会更少，但没有任何用处。

Answer 1

试试这个

你应该检查你的刻度类型 scaleBand, scaleLinear, scaleTime 等，它必须是 scaleTime, 将域更改为

x.domain([new Date()*1, new Date().getTime()+(days)]);

试试 console.log 这个

.attr("cx", function(d) { console.log(d.show_date); return d.show_date; });

如果它返回日期作为日期而不是数字更改为

.attr("cx", function(d) { console.log(d.show_date); return new Date(d.show_date)*1 });

如果不工作，尝试发布一些工作代码，以便有人可以更好地理解

如果你的比例是 var x = d3.scaleTime().range([0, width]);

尝试

.attr("cx", function(d) { console.log(d.show_date); return x(d.show_date) });