javascript - 获取点以在折线图 d3 上渲染(在 Meteor 中执行此操作)

Question

更新:所以，我能够正确地将数据放入我的 cx/cy 数据中(吐出正确的值)，但该元素给我一个 NaN 错误。

所以我得到了 3 个仅定义了半径的圆形元素。

原帖:

我有一个关于在 d3 折线图上渲染点的问题。我会尽力给出相关代码的每一部分(以及数据结构，稍微复杂一些)。

因此，目前，1 个黑点呈现在我的图表的左上角，但没有呈现在其他地方。当我 console.log cx 和 cy 返回函数时，看起来我得到了 3 个常量。我做错了什么？

Cities 当前是一个返回 3 个对象的数组。

每个对象都具有以下结构:

Object {
 name: 'string',
 values: array[objects]
}

值数组如下:

objects {
 Index: number,
 Time: date in a particular format
}

好的。相关代码时间:

      var points = svg.selectAll('dot')
        .data(cities);



      console.log('Points is :', points)


        points
        .enter().append('circle')
        // .data(function(d) {console.log("data d is :", d); return d})
        .data(cities)
        .attr('cx', function(d) {
          return x(new Date(d.values.forEach(function(c) {
            console.log("cx is: ", c.Time);
            return c.Time;
          })))})
        .attr('cy', function(d) {
          return y(d.values.forEach(function(c) {
            console.log("cy is: ", c.Index)
            return c.Index;
          }))
        })
        .attr('r', dotRadius());



      points.exit().remove();

      // points.attr('class', function(d,i) { return 'point point-' + i });

      d3.transition(points)
        .attr('cx', function(d) {
          return x(new Date(d.values.forEach(function(c) {
            console.log("cx is: ", c.Time);
            return c.Time;
          })))})
        .attr('cy', function(d) {
          return y(d.values.forEach(function(c) {
            console.log("cy is: ", c.Index)
            return c.Index;
          }))
        })
        .attr('r', dotRadius())

Answer 1

您需要在此处进行嵌套选择。

这个:

.attr('cx', function(d) {
  return x(new Date(d.values.forEach(function(c) {
    console.log("cx is: ", c.Time);
    return c.Time;
})))})

完全无效。一，attr 期望设置一个值，您试图让它处理一组值。第二，forEach 的设计仅返回未定义。只是不会工作。

你应该做这样的事情:

var g = svg.selectAll(".groupOfPoint") //<-- top level selection
      .data(cities)
    .enter().append("g")
      .attr("class", "groupOfPoint");

  g.selectAll(".point") //<-- this is the nested selection
    .data(function(d){
      return d.values; //<-- we are doing a circle for each value
    })
    .enter().append("circle")
    .attr("class", "point")
    .attr('cx', function(d){
      return x(d.Time);
    })
    .attr('cy', function(d){
      return y(d.Index);
    })
    .attr('r', 5)
    .style('fill', function(d,i,j){
      return color(j);
    });

既然你似乎是以此为基础构建的 example ，我有 modified it here是散点图而不是线。