使用Reactjs和D3创建气泡图

我正在尝试使用React + D3创建气泡图时遇到问题。我知道这个解决方案有npm模块，但是我不能将它们应用到我正在工作的项目中，并且缺乏使用新的React，ES6的方法来构建此图表的示例，这有点痛苦。所以，我能够建立一个正常的图表下面这个article：使用Reactjs和D3创建气泡图

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

如果尺寸将决定radious和Yaxis，g将是Xaxis

谢谢。

来源

2017-08-10 Lucas Oliveira

我发现了我面临的问题。基本上我已经在一个变量d3选择内部的原型，比我可以从这个选择附加一切。我还在试图explaing为什么代码工作，以构建一个柱状图，而不是一个气泡图，还是我的解决方案合作，他们两个：

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它abble选择SVG的节点HTML和呈现泡沫。

来源

2017-08-14 14:19:36

使用Reactjs和D3创建气泡图

回答

相关问题