React Faux DOM을 사용하여 D3 그룹화된 막대 차트에서 직사각형을 렌더링하려면 어떻게 해야 합니까?

React Faux DOM을 사용하여 D3 그룹화된 막대 차트에서 직사각형을 렌더링하려면 어떻게 해야 합니까?

리액트에서의 그룹바 차트 완성이 고통스러울 정도로 가까워지고 있습니다.react-faux-dom패키지.실제 직사각형을 제외한 모든 것이 설정되어 있습니다.내가 뭘 놓쳤는지 누가 알아줬으면 좋겠어제가 작업하고 있는 예는 여기에 있습니다.제 목표는 다중 막대 그룹이 있는 시간 척도 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그럼 당신의 문제는 당신이 바인드해야 한다는 것입니다.values것은 아니다.value아래를 참조해 주세요.

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); });

언급URL : https://stackoverflow.com/questions/38649771/how-to-render-rectangles-in-a-d3-grouped-bar-chart-using-react-faux-dom