Question

我是d3的新手，并试图通过构建可视化来学习。

我现在的目标是根据一些时间数据制作圆圈并为圆圈着色。我已经制作了圆圈，并希望为它添加时间刻度。我在svg元素上使用d3.arc（）创建的圆圈很好。我还创建了一个时间表（见下文）。我的问题是，如何将这个时间尺度“附加”到圆圈？我希望能够说在xyz时间点，我的数据保存了这个值，所以现在根据颜色比例为圆圈着色。

或者......我是不是错了？

var time = d3.scale.ordinal()
            .domain(d3.extent(data, function(d) {
                return d.date;
            }))

Answer 1

我认为您可能需要使用定量比例而不是序数。 https://github.com/mbostock/d3/wiki/Ordinal-Scales说 -

序数标度具有离散域，例如一组名称或类别

在您的代码中，您使用日期属性的“范围”，该属性仅提供2个值 - 数据中最早和最近的日期。是一个离散域，但是非常有限，并且不能很好地代表您的数据。该比例最多只能输出2个值。

var now = Date.now();
var then = now - 1000;

var colors = d3.scale.ordinal()
    .domain([then, now])
    .range(['#ff0000','#0000ff']);

colors(then);      // red
colors(now);       // blue
colors(now - 500); // red... expecting violet

将'序数'更改为'线性'，其余部分保持不变。

var now = Date.now();
var then = now - 1000;

var colors = d3.scale.linear()
    .domain([then, now])
    .range(['#ff0000','#0000ff']);

colors(then);      // red
colors(now);       // blue
colors(now - 500); // violet

棘手的部分（至少对我而言）是记住d3.scale.linear（）（上面的'colors'变量）的输出是一个函数。它可以像任何其他函数一样被调用。

var fakeData = d3.range(then, now, 10);

var svg = d3.select('body')
    .append('svg')
    .attr({ height: 500, width: 500 });

var circle = svg.append('circle')
    .attr({ r: 100, cx: 250, cy: 250 });

function changeTime(time){
    circle.attr('fill', colors(time));
}

如何使用D3将时间轴放到对象上？

1 个答案: