Question

我希望创建一个这样的图表 - 它在水平面上显示各种不同的关系。

所以我设想数据看起来像这样

[{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
}, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
}, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
}, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
}, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
}, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
}]

我在这里开始了一个jsfiddle。源自https://bost.ocks.org/mike/circles/ - 三个小圆圈 *最新小提琴 - http://jsfiddle.net/NYEaX/1425/

我首先遇到的问题 - 数组中的所有数据都必须是不同的值，否则圆圈将无法呈现
如何缩小/压缩圆圈 - 我尝试调整cx公式但不影响。

这是最新小提琴代码的当前结构。

//代码

        $(document).ready(function() {

  var rawData = [{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
  }, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
  }, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
  }, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
  }, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
  }, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
  }];



  var width = 700;
  var height = 500;
  var margin = {
    top: 20,
    right: 100,
    bottom: 30,
    left: 100
  }

  //serieschart
  var svg = d3.select(".serieschart").append("svg")
    .attr("class", "serieschart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bluedata = [5000,2000,2000,1600,701,1603];

  //blue layer
    var bluelayer = svg.append("g")
                                .attr("class", "bluelayer")

  var bluecircle = bluelayer.selectAll("circle")
    .data(bluedata);

  bluecircle.enter().append("circle")
    .attr("class", "blue")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  bluecircle.exit().remove();


  var golddata = [32, 57, 293,31, 455, 296];
    //gold layer
    var goldlayer = svg.append("g")
                                .attr("class", "goldlayer")

  var goldcircle = goldlayer.selectAll("circle")
    .data(golddata);

  goldcircle.enter().append("circle")
    .attr("class", "gold")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  goldcircle.exit().remove();



});

Answer 1

对于第一个问题：

 var bluecircle = bluelayer.selectAll("circle")
    .data(bluedata);

否则，当你到达

 .attr("cx", function(d, i) {
      return (i * 100) + 10;
    })

相同的元素将在cx函数中表示一次。

对于第二个问题，请修改您的cx，例如像这样：

.attr("cx", function(d, i) {
      return (i * 80) + 10;
    })

http://jsfiddle.net/3ky4wvgm/

祝你好运！：）

Answer 2

我已经连接了一个原始数据源来尝试控制应用程序。

http://jsfiddle.net/59bunh8u/23/ 我试着改变一些价值观 - 几乎是为了看看图表如何适应 - 但它开始用指针撕裂。 http://jsfiddle.net/59bunh8u/24/

M-4.78125,125L44.78125,125 75.50572494064927,60

当我改变路径以减少L坐标时，它几乎可以修复错误 - 它几乎就像路径的L部分被错误地绘制一样。

M-4.78125,125L4.78125,125 75.50572494064927,60

d3.js系列圆图

2 个答案: