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

更新：因此，我能够将数据正确地输入到我的cx / cy数据中（吐出正确的值），但是该元素给我一个NaN错误。

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

原始帖子：

我有一个关于在d3折线图上渲染点的问题。我将尝试给出相关代码的每个部分（以及数据结构，该结构稍微复杂一些）。

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

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

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

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

values数组如下：

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())

最佳答案

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

这个：

.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设为散点图，而不是线条。

关于javascript - 获取点以在折线图d3上渲染(在 meteor 中执行此操作)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35688767/