使用Reactjs和D3創建氣泡圖

Question

我在嘗試使用React + D3創建氣泡圖時遇到問題。 我知道這個解決方案有npm模塊，但是我不能將它們應用到我正在工作的項目中，並且缺少使用新的React ES6構建該圖表的示例，這有點麻煩。 所以，我能夠建立一個正常的圖表此以下文章 ：

    // 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變量中創建了原型，然后我可以將所有內容都添加到該select中。 我仍在嘗試解釋為什么代碼可以構建條形圖而不是氣泡圖，但我的解決方案仍適用於這兩種方法：

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上的節點並呈現氣泡。