小编Jes*_*ess的帖子

我正在进行标签可视化,其中标签在不同的力导向布局之间转换.

我几乎没有考虑如何从气泡图转换到节点图表,但我对如何将图表转换为文字云有点困惑.我的困难很大程度上源于我在编写自定义聚类/碰撞检测功能方面缺乏经验.

我将force声明为全局变量,然后在用户单击按钮时停止并启动它们:

var force1 = d3.layout.force()
    .size([width, height])
    .charge(0)
    .gravity(0.02)
    .on("tick", ticka);

//layout for node chart
var force2 = d3.layout.force()
    .size([width, height])
    .charge(-50)
    .gravity(0.005)
    .linkDistance(120)
    .on("tick", tickb);

//layout for bubble chart
var force3 = d3.layout.force()
    .size([width, height])
    .charge(0)
    .gravity(0.02)
    .on("tick", tickc);

当调用绘制节点的函数时(因为数据根据滑块值而变化),相关节点/链接函数被添加到强制中.

创建节点数据的代码如下:

nodes = splicedCounts.map(function(d, e) {
    var choice;
    var i = 0,
    r = d[1],
    d = { count: d[1],
          sentiment: d[2]/d[1],
          cluster: i,
          radius: radScale(r),
          name: d[0],
          index: e,
          x: Math.cos(i / m * 2 …

我有一个烦人的问题。

我正在尝试根据一堆共享相似属性的SVG文本元素来定位一堆SVG圆形元素。

circle元素的创建过程与文本元素的创建过程非常不同，因此，仅使用与旧元素相同的变换等方式来放置新元素不是可行的选择。

我正在尝试使用.getBoundingClientRect（）来获取位置，因为文本元素已转换为位置（因此.getBBox（）不是一个选择），而不是通过x和y属性进行定位。

使用.getBoundingClientRect（），我可以获取新元素的正确大小/排列，但是由于包含svg的div的宽度是可变的，因此总有些奇怪的偏移量，我无法完全解决。

我在这里创建了我的问题的简化示例。调整页面大小并刷新，以查看实际存在的问题。

我用来放置圆形元素的代码复制如下。

var circs = theSvg.selectAll("circle")
    .data(theCircles)
    .enter()
    .append("circle")
    .attr("r", 15)
    .attr("fill", "#f00")
    .style("opacity", 0.3)
    .attr("transform", function(d){

      var sizeDif = 800/(d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["width"]);

      var theNum = parseInt(d.split("&")[1]);
      var thePosition = theSvg.selectAll("text").filter(function(e){
      return e == theNum;})[0];
      var theCoords = thePosition[0].getBoundingClientRect();

      var leftOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["left"];
      var leftOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["left"];
      var bottomOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["top"];
      var bottomOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["top"];

      return
      "translate(" + ((theCoords["left"] - leftOffset - leftOffset2)  
       * sizeDif) + "," + ((theCoords["top"] - bottomOffset - bottomOffset2) 
       * sizeDif) …