使用D3从数组字典创建气泡图

时间:2018-06-30 17:35:31

标签: javascript d3.js

我有4个数组的字典。我想用此数据创建气泡图。 我的数据jobdata[0]如下:

Agriculture:
(10) ["10.18200016", "1.947999954", "18.35700035", "2.871999979", "1.307999969", "43.44400024", "3.884000063", "3.502000093", "1.123999953", "1.659999967"]
Industry:
(10) ["20.86899948", "19.51300049", "26.79100037", "20.29400063", "27.38199997", "23.71999931", "26.12199974", "25.61499977", "18.45800018", "18.79100037"]
Service:
(10) ["68.9489975", "78.53900146", "54.85200119", "76.83399963", "71.30999756", "32.83499908", "69.99299622", "70.88300323", "80.41899872", "79.5490036"]
country_name:
(10) ["Brazil", "Canada", "China", "France", "Germany", "India", "Italy", "Japan", "United Kingdom", "United States"]

这是我的代码:

var xScale = d3.scaleOrdinal()
    .domain(jobdata[0].country_name)
    .range([10,210,410,610,810,1010,1210,1410,1610,1810]);
    var bottomAxis = d3.axisBottom(xScale);
    var chartGroup = svg.append("g")
    .attr("transform", translate(${margin.left}, ${margin.top}))
    .call(bottomAxis);

var circle = chartGroup.selectAll('circle')
    .data(jobdata[0])
    .enter()
    .append("circle")
    .attr("cx",d=>xScale(d.country_name))
    .attr("cy", 50)
    .attr("r", d=>d.Agriculture)
    .attr("stroke", "black")
    .attr("stroke-width", "2")
    .attr("fill", "blue");

0 个答案:

没有答案