相关疑难解决方法(0)

我有一组数据,我使用d3.js可视化.我以气泡的形式表示数据点,其中气泡的配置如下:

var dot = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");

dot.append("circle")
  .attr("class", "dot")
  .attr("cx", function(d) { return xp(x(d)); })
  .attr("cy", function(d) { return yp(y(d)); })
  .style("fill", function(d) { return colorp(color(d)); })
  .attr("r", function(d) { return radiusp(radius(d)*2000000); });

dot.append("text")
   .attr("x", function(d) { return xp(x(d)); })
   .attr("y", function(d) { return yp(y(d)); })
   .text(function(d) { return d.name; })

其中xp,yp,colorp和radiusp定义如下:

var xp = d3.scale.log().domain([300, 1e5]).range([0, width]),
   yp = d3.scale.linear().domain([10, 85]).range([height, 0]),
   radiusp = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
   colorp = d3.scale.category10();

此时,气泡在其位置上显示为静态(其中位置由xp和yp定义),而气泡的大小基本上来自radiusp,颜色由colorp定义.

现在我正如这个例子那样展示它们: http ://bl.ocks.org/mbostock/4063269

我需要的是以这种形式显示它们: http …