javascript - How to render rectangles in a D3 grouped bar chart using React Faux DOM? - Stack Overflow

admin管理员组

文章数量:1410689

I am achingly close to finishing a group bar chart in React using react-faux-dom package. Everything is set except for the actual rectangles. Been spinning my wheels for a few hours so I'm hoping someone can see what I'm missing. The example that I'm working from is here. My goal is to have a time scale x-axis with multi bar groups. The X and Y axes are currently rendering without issue.

Data structure currently looks like so:

[
  {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},
    ...
  ]}
]

The React ponent's render method is below. It error on the final 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();
  }

I am achingly close to finishing a group bar chart in React using react-faux-dom package. Everything is set except for the actual rectangles. Been spinning my wheels for a few hours so I'm hoping someone can see what I'm missing. The example that I'm working from is here. My goal is to have a time scale x-axis with multi bar groups. The X and Y axes are currently rendering without issue.

Data structure currently looks like so:

[
  {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},
    ...
  ]}
]

The React ponent's render method is below. It error on the final 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();
  }

• javascript
• d3.js
• reactjs

Share Follow edited Jul 29, 2016 at 6:20 Kwhitejr asked Jul 29, 2016 at 2:47 KwhitejrKwhitejr 2,30666 gold badges3333 silver badges5151 bronze badges 4

• 4 If you append isn't it already selected? That svg.append("g").selectAll("g") seems extraneous to me. What is the exact error you're getting? Edit: Oh, I see, that's how the original example is. The error would be very useful though. – Olical Commented Aug 4, 2016 at 14:21
• 3 Better still, if you can get this running in JSFiddle I can take a closer look :) if we're both convinced it's a bug, please feel free to raise an issue, maybe add this as a test case. – Olical Commented Aug 4, 2016 at 14:23
• 1 @Kwhitejr I also happen to consider work a distraction. Not sure why, but Mr. Bossman strongly disagrees. – tao Commented Jan 29, 2017 at 1:56
• 2 Could you explain what exactly isn't working? A minimal runnable example would be great. – Anko Commented Jul 29, 2017 at 14:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

If your data is starting out like the example you provided, it's already nested and d3.nest(). Assuming that the data from your example is nestedData, then your problem is that you need to bind values not value. See below:

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

本文标签： javascriptHow to render rectangles in a D3 grouped bar chart using React Faux DOMStack Overflow