Javascript 如何使用React Faux DOM在D3分组条形图中呈现矩形？

我很快就要在React中使用

React-faux-dom

package完成一个组条形图了。除了实际的矩形外，其他都已设置。我已经转了几个小时了，所以我希望有人能看到我错过了什么。我工作的例子。我的目标是拥有一个带有多条组的时间刻度x轴。X轴和Y轴当前正在渲染，没有问题

数据结构目前看起来是这样的：

[
  {key: "oauths", values: [
    { date: Tue Jul 26 2016 00:00:00 GMT-1000 (HST), key: "oauths", value: 3060},
    { date: Tue Jul 27 2016 00:00:00 GMT-1000 (HST), key: "oauths", value: 2060},
    { date: Tue Jul 28 2016 00:00:00 GMT-1000 (HST), key: "oauths", value: 3270},
  ...]},
  {key: "user_stats", values: [
    { date: Tue Jul 26 2016 00:00:00 GMT-1000 (HST), key: "user_stats", value: 2976},
    ...
  ]}
]

React组件的渲染方法如下所示。它在最后的

svg.append（）中显示错误…

render() {
    const data = [ {}, {} ]; // see above

    // Constants
    const margin = {top: 30, right: 20, bottom: 30, left: 50},
          width = 600 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom,
          n = this.props.dataQueryPeriod.length, // number of samples
          m = 2; // number of series

    // Parse the date / time
    const parseDate = d3.time.format("%Y-%m-%d").parse;

    // Set ranges
    const yScale = d3.scale.linear()
      .range([height, 0]);

    const x0 = d3.scale.ordinal()
      .domain(d3.range(n))
      .rangeBands([0, width], .2);

    const x1 = d3.scale.ordinal()
      .domain(d3.range(m))
      .rangeBands([0, x0.rangeBand()]);

    const xScale = d3.time.scale().range([0, width]);

    // Test colors
    var z = d3.scale.category10();

    // Define axes
    const xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .ticks(d3.time.days);

    const yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .tickFormat(d3.format("s"));

    // Convert structured data to nested data
    const nest = d3.nest()
        .key(function(d) { return d.key; })
        .sortKeys(d3.ascending);

    // Create node
    let node = ReactFauxDOM.createElement('svg');

    let svg = d3.select(node)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom+40)
      .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.value = +d.value;
    });

    const nestedData = nest.entries(data);
    console.log("nested data", nestedData);
    console.log("pre nest data", data);

    // Define axes domains
    xScale.domain(d3.extent(data, function(d) { return d.date; }));
    yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(0,${height})`)
      .call(xAxis)
      .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", function(d) {
            return "rotate(-65)";
          });

    svg.append("g").selectAll("g")
        .data(nestedData)
      .enter().append("g")
        .style("fill", function(d, i) { return z(i); })
        .attr("transform", function(d, i) { return `translate(${x1(i)},0)`; })
      .selectAll("rect")
        .data(function(d) { return d.value; })
      .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("height", yScale)
        .attr("x", function(d, i) { return x0(i); })
        .attr("y", function(d) { return height - yScale(d.value); });

    return node.toReact();
  }

---

如果您的数据是从您提供的示例开始的，那么它已经嵌套在d3.nest（）中。假设示例中的数据是

nestedData

，那么您的问题是需要绑定

值

而不是

值

。见下文：

svg.append("g").selectAll("g")
    .data(nestedData)
    .enter()
    .append("g")
    .style("fill", function(d, i) { return z(i); })
    .attr("transform", function(d, i) { return `translate(${x1(i)},0)`; })
    .selectAll("rect")
    .data(function(d) { return d.values; }) // This needs to be values
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("height", yScale)
    .attr("x", function(d, i) { return x0(i); })
    .attr("y", function(d) { return height - yScale(d.value); });

---

如果附加，它是否已被选中？对我来说，

svg.append（“g”）.selectAll（“g”）

似乎无关紧要。您得到的确切错误是什么？编辑：哦，我明白了，原来的例子就是这样的。这个错误是非常有用的。更好的是，如果你能在JSFiddle运行这一点，我可以更仔细地看一看：）如果我们都确信这是一个bug，请自由提出一个问题，或者把它作为一个测试用例。不知道为什么，但博斯曼先生强烈反对。你能解释一下到底是什么不起作用吗？A太好了。