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
    }
  ]
}

如果大小将决定gious和yaxis，g将是Xaxis

谢谢。

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


    }

所以现在变量getSelect它能够在svg html上选择节点并渲染气泡。

使用Reactjs和D3创建气泡图

1 个答案: