javascript - 使用 Reactjs 和 D3 创建气泡图

Question

我在尝试使用 React + D3 创建气泡图时遇到问题。 我知道这个解决方案有 npm 模块，但我无法将它们应用到我正在工作的项目中，并且缺乏使用新的 React、ES6 构建此图表的方法的示例，这有点痛苦。 因此，我可以按照此 article 构建一个正常的图表:

    // Dependencies.
import React, { Component } from 'react';
import '../App.css';
import { scaleLinear } from 'd3-scale';
import { max } from 'd3-array';
import { select } from 'd3-selection';
import * as d3 from "d3";

class FeatureFour extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data : this.props.data
        };
        this.createBarChart = this.createBarChart.bind(this)
    };

    componentDidMount() {
        this.createBarChart();
    }

    componentDidUpdate() {
        this.createBarChart()
    }

    createBarChart() {
        const node = this.node;
        const advImpact = this.state.data;
        const color = "blue";
        const dataMax = max(advImpact);
        console.log(dataMax);

        const yScale = scaleLinear()
            .domain([0, dataMax])
            .range([0, this.props.size[1]])

        select(node)
            .selectAll('rect')
            .data(advImpact)
            .enter()
            .append('rect')

        select(node)
            .selectAll('rect')
            .data(advImpact)
            .exit()
            .remove()

        select(node)
            .selectAll('rect')
            .data(advImpact)
            .style('fill', '#fe9922')
            .attr('x', (d,i) => i * 25)
            .attr('y', d => this.props.size[1] - yScale(d))
            .attr('height', d => yScale(d))
            .attr('width', 25);


    };

    render() {
        return (
            <div>
                <svg ref={node => this.node = node} width={500} height={500}>
                </svg>

            </div>
        )
    }
}




// Component.
export default FeatureFour;

所以我的问题是......转换这个图表并附加圆圈，并创建半径

这段代码的调用方式如下:

<FeatureFour data={[5,10,1,3]} size={[500,500]}/> 

但是数据将是 Json

{
  "children": [
    { "id": 1,
      "title": "oneField",
      "size": 150,
      "g": 80
    },
    { "id": 2,
      "title": "Teaser",
      "size": 30,
      "g": 50
    },
    { "id": 3,
      "title": "Crazy",
      "size": 70,
      "g": 80
    }
  ]
}

如果尺寸决定半径和 Y 轴，g 将是 X 轴

谢谢。

Answer 1

我发现了我面临的问题。基本上我在变量 d3-select 中建立了原型(prototype)，然后我可以附加此选择中的所有内容。 我仍在尝试解释为什么代码可以构建条形图而不是气泡图，但我的解决方案仍然适用于它们:

createBubbleChart(){
        const node = this.node;
        const advImpact = this.state.data;
        const format = d3.format(",d");
        const svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");

        const color = d3.scaleOrdinal(d3.schemeCategory20);

        const bubble = d3.pack(advImpact)
            .size([width, height])
            .padding(1.5);

        const nodes = d3.hierarchy(advImpact)
            .sum(function(d) { return d.id; });


        let getSelect = select(node)
            .selectAll('circle')
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

        getSelect.append("circle")
            .attr("id", function(d) { return d.data.id; })
            .attr("r", function(d) { return d.r; })
            .style("fill", function(d) { console.log(d); return color(d.data.id); });

        getSelect.append("clipPath")
            .attr("id", function(d) { return "clip-" + d.data.id; })
            .append("use")
            .attr("xlink:href", function(d) { return "#" + d.data.id; });

        getSelect.append("text")
            .attr("dy", ".3em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.id + ": " + d.data.title;
            });

        getSelect.append("title")
            .text(function(d) { return d.data.id + "\n" + format(d.value); });


    }

现在变量 getSelect 可以选择 svg html 上的节点并渲染气泡。