使用 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;

所以我的问题是...转换此图表并附加圆圈，并创建 Radious

此代码的调用方式如下：

<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变量中进行了原型设计，然后我可以附加此选择中的所有内容。 我仍在尝试解释为什么代码可以构建条形图而不是气泡图，但我的解决方案仍然适用于它们：

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

}

所以现在变量get选择它是绝对的，可以在svg html上选择节点并渲染气泡。