d3js 组和折线图动画 - 图例切换 [关闭]

Question

我正在尝试构建此组图的折线图 - 带有图例切换。我不确定我的动画是否正确 - 并且希望在结构上基本上使图表姐妹。

//分组图表 http://jsfiddle.net/0ht35rpb/259/

//折线图 http://jsfiddle.net/0ht35rpb/262/

g.append("g")
  .selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("class", "bar")
  .attr("transform", function(d) {
    return "translate(" + x0(d.State) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return { key: key, value: d[key]};
    });
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x1(d.key);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", x1.bandwidth())
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .attr("fill", function(d, i) {            
    return z(d.key);
  });

-- 所以第一行看起来像这样-但我想我缺少 enter() 部分

// define the line
var valueline = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { 
      return x(parseTime(d.date));
     })
    .y(function(d) { 
      return y(d.temperature); 
    });

g.selectAll(".city")
  .data(cities)
  .enter().append("g")
  .attr("class", "city")
  .append("path")
  .attr("class", "line")
  .attr("d", function(d){
    return valueline(d.values);
  })
  .style("stroke", function(d) {
    return z(d.id);
  });

当涉及到切换图例时，我如何修复折线图以动画线条 - 并修复域 - 因为现在是一个时间尺度。同样参考这两个图表 - 我是否应该将上面看到的“制作条”“制作线”代码 - 放入实际函数中 - 在更新函数方法期间重复使用 - 对于每个图表？

Answer 1

这是一个fiddle，其中包含您要求的动画。

相关代码：

y.domain([
  d3.min(cities, function(c) {
  if(filtered.indexOf(c.id) === -1) {
    return d3.min(c.values, function(d) {
      return d.temperature;
    });
    }
  }),
  d3.max(cities, function(c) {
  if(filtered.indexOf(c.id) === -1) {
    return d3.max(c.values, function(d) {
      return d.temperature;
    });
    }
  })
]);

  g.select(".axis.axis--y").transition().duration(500)
  .call(d3.axisLeft(y));

    g.selectAll('.city path').transition().duration(500).attr('d', function(d) { 
    if(filtered.indexOf(d.id) > -1) {
        return null;
    } else {
        return valueline(d.values);
    }
  });

你的代码遗漏了很多东西：

1. X 轴是一个时间尺度，在您的情况下，您不需要在更新函数中更新 x 轴，因为您根据城市名称而不是日期进行切换。
2. 事件如果您有一个不断变化的 X 轴，您将不会以这种方式更改域。时间刻度查找日期，您似乎将其设置为城市名称。 （“新键”）
3. 设置 y 域将基于“城市”数组，因为您使用它来呈现图表。但在更新函数中，您似乎使用“数据”数组来设置 y 域，因此是 y 轴问题。
4. 也添加了到 y 轴的过渡。
5. var paths = svg.selectAll(".line").selectAll("path") 不是你想要的，因为你有路径本身的类“line”。相关版本为：svg.selectAll("path.line")
6. 无论如何，由于选择错误，路径过滤不起作用，就过滤而言，路径正在调用“line”函数，而代码中的 line 函数被定义为“valueline”
7. 以与您类似的方式过滤路径将是正确的：

  g.selectAll('.city path').transition().duration(500)
    .attr('d', function(d) { 
      if(filtered.indexOf(d.id) > -1) {
          return null;
        } else {
          return valueline(d.values);
      }
      });

希望这会有所帮助。 :)