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

D3：调整x轴大小并重新定位圆

1 个答案: