标签: force-layout

d3的新手,并尝试开发一个力导向树,我们可以插入varioss数据集.我已经设法启动并运行基本的想法,但想使链接弯曲,所以我可以处理多个链接.我看过http://bl.ocks.org/1153292,我只是没有得到它.我得到的最近是没有路径可见.这是我的直线代码,如果你有时间,我会感激一些帮助

谢谢:

//Sets up the svg that holds the data structure and puts it in the div called mapBox
var svg = d3.select("div#mapBox.theMap").append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight);

//Sets up the data structure and binds the data to it       
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.size([mapWidth, mapHeight])
.charge(-600)
.linkDistance(60)
.start();

//Draws the links and set up their styles
var link = svg.selectAll("link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.style("stroke", "#ccc")

//Creates nodes and attached "g" element to append other things to …

我有一个(相当简单的)问题:如何在D3.js的选择中"取消调用"force.drag？假设我创建了一组元素并在其上调用"call",给它一个强制定向布局的拖拽回调.看起来像这样:

    d3.selectAll('rect').call(force.drag);

现在,以后可以从某些节点中删除该行为.我的方法包括重置各种听众,例如"点击","拖动"等

    d3.select('rect#no-drag').on('click', null);

他们都没有工作.有人知道如何删除回调吗？

我有一个d3生成的力布局图,我需要将其导出到png当前(用户选择)缩放完整.

根据我的推理,这将增加SVG宽度和高度,所以如果svg是,1920x1080并且它被'缩放',导出的svg应该有更大的宽度和高度来容纳这个.

我已经尝试了一切,我错过了一些东西,我似乎无法动态计算我需要的输出的正确值.

这是我导出的一个示例SVG,请注意,有更多信息,它只是在那个规模上不可见.

编辑

这是我的基本导出代码,主要改编自highcharts:

    serializeSvg: function() {
        /**
         * serialize a xml object to string
         * @param {type} xmlNode the node to use
         * @returns {String|@exp;xmlNode@pro;xml|@exp;window@pro;XMLSerializer@call;@call;serializeToString}
         */
        function serializeXmlNode(xmlNode) {
            if (typeof window.XMLSerializer !== 'undefined') {
                return (new window.XMLSerializer()).serializeToString(xmlNode);
            } else if (typeof xmlNode.xml !== 'undefined') {
                return xmlNode.xml;
            }

            return '';
        }

        var svg = serializeXmlNode(document.getElementsByTagName('svg')[0]),
            factor = 2;
        svg = '<svg' …

我正在使用d3.js和jquery与PHP后端(基于yii框架)来创建动态力导向图,以表示我们使用Nagios监视的网络上的主机和服务的当前状态.

该图显示了root - > hostgroups - > hosts - > services.我已经创建了一个服务器端函数来以下列格式返回JSON对象

{
    "nodes": [
        {
            "name": "MaaS",
            "object_id": 0
        },
        {
            "name": "Convergence",
            "object_id": "531",
            "colour": "#999900"
        },
        {
            "name": "maas-servers",
            "object_id": "719",
            "colour": "#999900"
        },
        {
            "name": "hrg-cube",
            "object_id": "400",
            "colour": "#660033"
        }
    ],
    "links": [
        {
            "source": 0,
            "target": "531"
        },
        {
            "source": 0,
            "target": "719"
        },
        {
            "source": "719",
            "target": "400"
        }
    ]
}

节点包含在链接中使用的对象id和用于显示节点状态的颜色(OK =绿色,WARNING =黄色等)链接具有节点的源对象id和目标对象id.在监视系统中添加或删除新主机时,节点和链接可能会发生变化

我有以下代码设置初始SVG,然后每10秒

1. 检索当前的JSON对象
2. 创建链接的地图
3. 选择当前节点和链接并将它们绑定到JSON数据
4. 添加输入链接并删除退出链接
5. 更新和添加的节点将更改其填充颜色并添加其名称的工具提示

6. 力量开始了

   $ .ajaxSetup({cache:false}); width …

我正在使用惊人的D3JS来构建图表.渲染图形,但我希望我的节点每个节点都有它的大小.

数据采用以下形式:

{来源:"Antony Hoppkins",目标:"伍迪艾伦",价值:3}

这是代码:

var links = graph.links;
var nodes = {};

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 1200,
    height = 1500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

var svg = d3.select("#network").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .style("stroke-width", function(d) { return …

我使用d3创建了一个力布局,效果很好.我的初始数据是从json文件加载的,并且使用与此d3.js示例类似的技术绘制图表:

现在图表在屏幕上,我需要通过Web套接字从我收到的数据中动态添加,更新和删除节点.我添加和删除方法工作,但我找不到更新现有节点属性的正确方法.

从我所进行的阅读中我收集正确的技术是更改数据源,然后使用enter()方法更新图表.

要更新节点,我正在执行以下操作:

function updateNode(id, word, size, trend, parent_id){    
  var updateNode = nodes.filter(function(d, i) { return d.id == id ? this : null; });
  if(updateNode[0]){   
    updateNode.size = Number(size);
    updateNode.trend = trend;
    nodes[updateNode.index] = updateNode;      
    update();
  }
}

然后,更新功能使用以下命令更新节点:

function update(){
  node = vis.selectAll('.node')
  .data(nodes, function(d) {
    return d.id;
  })

  createNewNodes(node.enter());
  node.exit().remove();
  force.start();
}

function createNewNodes(selection){    
  var slct = selection.append('g')
  .attr('class', 'node')
  .call(force.drag);

  slct.append('circle')
    .transition()
    .duration(500)
    .attr('r', function(d) {
      if(d.size){
        return Math.sqrt(sizeScale(d.size)*40);
      }
   })
}

我采取了正确的方法吗？当我尝试这个代码时,我尝试在圆上设置radius属性时获得的节点是节点数组中的最后一个节点.即包含分层节点数据而不是单个节点对象的那个.

任何指针都会非常感激,我花了太多时间在这:)

我仍然不明白为什么下面的代码没有显示它的标签/文本...我已经定义了css并在移动到节点上时设置了类似标题的属性:

JSON:

{
 "nodes":[
   {"name":"t1","group":1},
   {"name":"t2","group":1},
   {"name":"t3","group":1}, 
   {"name":"t4","group":1},
   {"name":"hate","group":2},
   {"name":"good","group":2},
   {"name":"aiport","group":3},
   {"name":"flight","group":3}
 ],
 "links":[
   {"source":0,"target":4,"value":4},
   {"source":0,"target":5,"value":4},
   {"source":1,"target":4,"value":4},
   {"source":2,"target":5,"value":4},
   {"source":3,"target":5,"value":4},
   {"source":4,"target":6,"value":4},
   {"source":5,"target":6,"value":4},
   {"source":5,"target":7,"value":4}
 ]
}

码:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  fill: #555;
  stroke: #999;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 1024,
        height = 768;

    var color = d3.scale.category20();

    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([width, height]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    d3.json("data.json", function(error, …

我正在使用强制布局来表示定向的未加权网络.我的灵感来自以下示例:http://bl.ocks.org/mbostock/1153292

我尝试制作不同大小的节点,但我有一点问题.用于在每个链接上绘制箭头的标记指向圆的中心.如果圆圈太大,则完全覆盖箭头.

我怎么处理这个？

当我点击一个节点时,我的节点变大了,而现在它变得更大了,我希望他能够更多地排斥其他节点.如何更改节点的费用？

代码摘录:

[...]

//draw new graph
d3.json(file, function(error, graph) {

force
.nodes(graph.nodes)
.links(graph.links)
.start();

var nodeCircle = node.append("circle")
.attr("id", function(d) { return "node"+d.id })
.attr("class", function(d) {return "node "+d.nodeclass; })
.attr("r", 8) // R = Radius of node
.style("fill", function(d) { return d.color; }) // Will overwrite CSS style
.on("click",function(d) {

    //When CTRL key is pressed ....
    if (d3.event.ctrlKey) {
        if(d3.select(this).attr('r')==8){
            d3.select(this).attr('r', 12);
            //ToDo: node Charge = -1000
        }else{
            d3.select(this).attr('r', 8);
            //ToDo: node Charge = -500
        }
    }

}).call(force.drag);
[...]

有没有办法在D3强制导向图中禁用动画？

我正在使用这个例子:https://bl.ocks.org/mbostock/4062045

我想在没有初始动画的情况下渲染图形,即显示其最终位置中的所有节点和链接.