小编Eli*_*jah的帖子

修复D3强制定向布局中的节点位置

我希望我的力导向布局中的一些节点忽略力并基于节点的属性保持在固定位置,同时仍然能够被拖动并在其他节点上施加排斥并保持其链接线.我觉得它会像这样简单:

force.on("tick", function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return (d.someAttribute == true) ?
               "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
               "translate(" + d.x + "," + d.y + ")"
        });
  });
Run Code Online (Sandbox Code Playgroud)

我还尝试手动设置节点的x和y属性on-tick,但是如果受到力的影响,链接将继续浮动到节点所在的位置.

显然我对这应该如何工作有一个基本的误解,所以有人可以指出一个例子,其中一些节点固定在它们的位置(但仍然是可拖动的),其余的节点是围绕力导向的,并且所有链接仍在工作?

javascript data-visualization d3.js force-layout d3-force-directed

65
推荐指数
2
解决办法
4万
查看次数

使用SVG元素和G的StopPropagation()

我创建了一个带有.on("click")行为的SVG元素,并使用.on("click")附加了g元素,并认为我可以使用d3.event.stopPropagation()来保持SVG click事件不会被触发g点击事件.相反,这两个事件继续发生.所以我必须把stopPropagation放在错误的地方.

svg = d3.select("#viz").append("svg:svg")
    .attr("width", 800)
    .attr("height", 800)
    .on("mousedown", mousedown);

sites = svg.selectAll("g.sites")
    .data(json.features)
    .enter()
    .append("svg:g")
    .on("click", siteClick)
    ;

sites.append("svg:circle")                
    .attr('r', 5)
    .attr("class", "sites")
    ;

function mousedown() {
    console.log("mouseDown");
}

function siteClick(d, i) {
    d3.event.stopPropagation();
    console.log("siteClick");
}
Run Code Online (Sandbox Code Playgroud)

svg dom-events stoppropagation d3.js

13
推荐指数
1
解决办法
2万
查看次数

TopoJSON属性保存

我正在使用topojson转换现有的GeoJSON数据集,而不是保留属性.它遵循标准的GeoJSON格式,并将属性放置在与几何(下面的代码片段)相同的"属性"对象中,但是当topojson成功完成时,我最终得到一个有效的topojson数据文件,我可以使用并显示在地图,但文件中没有任何属性.我没有指定属性,默认行为是在这种情况下保留所有属性,所以我很困惑.

{"type": "Feature", "geometry": {"type":"MultiLineString","coordinates":[[[12.06,37.97],[12.064,37.991]],[[12.064,37.991],[28.985,41.018]]]}, "properties": {"pair": 50129,"direction": 0,"month": 12,"priority": 0,"expense": 4.854,"duration": 20.423,"length": 2950.524}}
Run Code Online (Sandbox Code Playgroud)

编辑:我也没有足够的积分来注册topojson标签,所以我会将其列为D3,直到创建该标签.

d3.js

13
推荐指数
2
解决办法
3265
查看次数

D3匿名函数中的第三个变量

假设您已选择绑定了一些数据,并使用典型的内联匿名函数来访问该数据:

 d3.select("#whatever").each(function(d,i,q) {console.log(d,i,q)})
Run Code Online (Sandbox Code Playgroud)

我们都知道第一个变量是数据,第二个是数组位置.但第三个变量(在这种情况下为q)代表什么?到目前为止,在我测试过的所有内容中,它总是回归零.

d3.js

12
推荐指数
1
解决办法
3900
查看次数

在D3中移动固定节点

我在D3强制定向布局中设置了节点.fixed = true.如果我设置.x或.y值,节点本身不会移动到新位置.

这是我的功能:

function fixNode(idArray, locationX, locationY) {
    for ( x = 0; x < idArray.length; x++ ) {
        for ( y = 0; y < nodes.length; y++ ) {
            if (nodes[y].id == idArray[x]) {
                nodes[y].fixed = true;
                nodes[y].x = 50;
                nodes[y].y = 50;
                break;
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

更新1:

这是基于杰森建议的工作函数:

function fixNode(idArray, locationX, locationY) {
    for ( x = 0; x < idArray.length; x++ ) {
        for ( y = 0; y < nodes.length; y++ ) { …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js force-layout

7
推荐指数
1
解决办法
7067
查看次数

SVG上的下拉菜单?

我有一个svg画布,使用d3充满了有趣的数据可视化,我想在svg:rect元素上面出现一个传统的html下拉菜单.这可能吗?我意识到我可以使用foreignObject,但这与IE不兼容.

html javascript html5 svg d3.js

5
推荐指数
1
解决办法
6925
查看次数

.each()带过滤器

我正在查看另一个stackoverflow问题,我尝试了以下内容:

d3.selectAll(links.filter(function(db) {
  return db.source.id == 'foo'
})).each(function(p) {
      console.log (p.source.id)
    })
Run Code Online (Sandbox Code Playgroud)

并发现它返回了一个

TypeError:无法读取未定义的属性"source"

即使过滤后的选择返回为具有.source.id值的对象的正确数组(此示例使用D3的强制定向网络中的标准链接符号).

我只是好奇为什么这不起作用.

typeerror d3.js

3
推荐指数
1
解决办法
3万
查看次数

强制定向布局的NaN附加在D3.js中

我在D3中使用强制定向布局从JSON文件中获取数据,然后在双击其中一个节点时查询数据库以查找指向该节点的链接并更新尝试追加的链接和节点数组新数据到了即.似乎在没有链接的情况下附加节点时,它们工作正常,但是到xy坐标的链接最终是NaN.你可以在这里看到效果,只需双击其中一个节点:

http://blockses.appspot.com/2432083

javascript layout svg d3.js force-layout

2
推荐指数
1
解决办法
2975
查看次数

将ID分配给单个轴文本元素

我使用d3.axis()来创建轴标签和刻度,我想是指单独使用d3.select("#axisTextIDValue")的标记,但我看不出有什么方法来操纵单个文本元素的id属性一个轴.有谁知道如何为轴的刻度或文本元素创建ID值?

label axis d3.js

1
推荐指数
1
解决办法
2408
查看次数