I'm facing a problem trying to create a bubble chart using React + D3. I know there is npm modules with this solution, but I cant apply them to the project I'm working, and the lack of examples using the new React, ES6 , way to build this chart , it's being a little bit of a pain. So, I'm able to build a normal chart following this 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;
So my problem Is ... to tranform this chart and append the circle , and to create the radious
this code is being called like:
<FeatureFour data={[5,10,1,3]} size={[500,500]}/>
But the data will be a 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
}
]
}
Where the size will determ the radious and the Yaxis, g will be the Xaxis
Thank you.
I've discovered the issue that I was facing. Basically I've prototype inside a variable the d3-select, than I could just append everything from this select. Im still trying to explaing why the code works to build a bar chart and not a bubble chart, still my solution worked to both of them :
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); });
}
So now the variable getSelect it's abble to select the node on svg html and render the bubble.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.