我已经开发了一种力量布局来表示社会群体之间的关系.现在我想让节点分布在一个带有连接它们的链接的圆圈中.做这个的最好方式是什么？ 代码的完整版本(没有数据)在这里http://jsfiddle.net/PatriciaW/zZSJT/(为什么我也必须在这里包含代码？这是主要部分)d3.json("/relationships?nocache=" + (new Date()).getTime(),function(error,members){var links=members.organizations.map(function(members) {return members.member;});va...
我见过这个问题：Is there a way to zoom into a D3 force layout graph? 但是我从我的图形中得到了一些意想不到的行为 – 在几次拖动或缩放或平移后所有节点都冻结并拖动停止工作. 我创造了这个小提琴：http://jsfiddle.net/7gpweae9/9/ 所以要求代码,所以这里是主要部分：var svg = d3.select("#graph").append("svg:svg").attr("width", width).attr("height", height).attr("pointer-event", "all").append("svg:g").call(d3.b...
在d3.js v4中,嵌套选择似乎不像过去那样有效. 这工作(在第3节)：var data = [["1-a", "1-b"], ["2-a", "2-b"]];var tbody = d3.select("tbody");var row = tbody.selectAll("tr").data(data); row.exit().remove(); row.enter().append("tr");var cell = row.selectAll("td").data(function(d){ return d;}); cell.exit().remove(); cell.enter().append("td"); cell.text(function(d){ return d; });https://jsfiddle.net/nwozjsc...
这是JavaScript代码：d3.json("city.json", function (error, root) {var nodes = cluster.nodes(root);var links = cluster.links(nodes);console.log(nodes);console.log(links);var link = gCluster.selectAll(".link").data(links).enter().append("path").attr("class", "link").attr("d", diagonal);当我记录节点和链接时,它说有x和y属性： 我的json文件就是这样的： 这两个属性来自哪里？解决方法:这是因为d3.layout.cluste...
我一直在尝试使用d3 v4插件在我的网页中显示两个图表 我一直在关注工具提示的使用示例,但我遇到了一个问题：在第一个图表中,工具提示显示在正确的位置(在条形图上方),但在底部图表中,工具提示似乎会转到页面底部. 这是一个非常简单的例子：https://jsfiddle.net/xvs98vru/ HTML<div class="container"><div class="row"><div class="col-md-12"><div id="chart1" class="c"></div></div><div class="col-md-12"><div id="chart2" c...
我需要在我的网站上放置一个d3条形图.那里的数据来自服务器.数据可能非常大或者也可能很小.我已经提到了下面的代码. 当数据动态增加时,如何自动添加滚动条而不是减小条的宽度？ 同样,如果数据较少,则条形大小应保持不变.// Setup svg using Bostock's margin conventionvar margin = {top: 20, right: 160, bottom: 35, left: 30};var width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;var sv...
我前几天曾问过这个问题,但我认为除了paxRoman之外的任何人都没有弄清楚我在问什么,因为没有一个例子很难描述. 然而,我们设法找出可能是我的问题,我设法将代码放在bl.ocks.org上,这样你就可以看到我的意思了一个例子！ 这是一个例子：http://bl.ocks.org/3020018 每次刷新数据时(在此示例中,只读取json文件),将重新创建所有节点并将其重新添加到绘图中. 我想要发生什么 我想要节点更新而不移动. 如果新数组中存在一个新节点,它应该...
我用d3.js画了一个Lima?on(见jsfiddle).当你沿着x轴移动点时(我称这个变量为px,形状会有所改变). http://mathworld.wolfram.com/images/eps-gif/LimaconEnvelope_800.gif 我想复制一个angular.js例子(jsfiddle,用滑块改变div的RGB颜色);滑块与我的d3.js代码中的px变量绑定. 如何修改我的jsfiddle以添加此用户交互？是不是像onclick()？ 我想移动滑块并在我的脚本中更改变量’px’,它会水平移动一个点.然后我必须重新计算一堆圆的半...
我修改了Collapsible Force Layout http://mbostock.github.io/d3/talk/20111116/force-collapsible.html示例： ……现在看起来像这样 所有圆圈现在都可以拖动.我想在svg的中间贴中间圆圈(蓝色圆圈).可能吗？谢谢.<script>var width = 960,height = 600,root;var force = d3.layout.force().linkDistance(175).charge(-200).gravity(0).size([width, height]).on("tick", tick);var svg = d3.select("body").append("svg").attr("w...
var treeData = [{"name": "Device","parent": "null"}]; var treeData2 = [{"name": "Device","parent": "null"}];$(document).ready(function() {var margin = {top: 20,right: 120,bottom: 20,left: 120},width = 1260 - margin.right - margin.left,height = 500 - margin.top - margin.bottom;var i = 0,duration = 750,root;var tree = d3.layout.tree().size([height, width]);var diagonal = d3.svg.diagonal().projection...
有谁知道如何通过D3完成每帧回调的转换.这是我目前正在做的事情的例子.link.transition().duration(duration).attr("d", diagonal).each("end",function(e) {if(e.target.id == current)show_tooltip(e.target)});这当前在动画结束时为每个元素调用匿名函数.我想把它称为每一帧.解决方法:您可以注册一个自定义补间,它返回每个tick时要调用的函数.link.transition().duration(duration).attr("d", diagonal).tween("side-effects", ...
我昨天刚开始使用d3.js,我在完成任务时遇到了一些麻烦. 现在我创建了一个包含两个y轴的图表,每个轴显示一些值,x轴显示日期. 单击y轴上的值,我显示相应的水平网格线. 我的问题是,当放大或缩小或拖动时,网格线(水平和垂直)不能使用轴值正确缩放,它们根本不移动. 我今天下午搜索了很多,并找到了一些如何做的例子,但它们似乎都没有使用我已有的代码. 我认为,逻辑应该添加到缩放行为,但我不确定// x axis gridlines function make_x_gri...
我有一个d3强制导向图,其中包含一组节点：var node = vis.selectAll("g.node").data(json.nodes).enter().append("svg:g").attr("class", "node").attr("id", function(d) { return "node" + d.index; }).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(force.drag);这很好. 我现在想要在显示带有详细信息detail_container的详细信息div时将这些节点转换(移动)到右边200个像素. 我尝试了以...
我正在尝试创建一个D3.js packed circle diagram. 当我将数据嵌入HTML文件时,它工作正常.当我将数据放在外部文件中时,我什么也得不到(空白DOM,没有控制台消息). 如果取消注释var数据声明并注释掉d3.json(以及相应的右括号),它可以正常工作. 我可以在浏览器中看到“2013 Inf-2.json”文件,它看起来很好(它通过了jsonlint验证).它包括从第一个“{”到/包括最后一个“}”的所有内容.就像嵌入式的例子一样. 我在OSX Mavericks上通过htt...
我正在使用它进行简单的可视化. http://bl.ocks.org/KoGor/5994804 我想在每个国家的路径上添加他的名字.我试图遍布各国,但我不知道与SVG联系.var world = svg.selectAll("path.land").data(countries).enter().append("path").attr("class", "land").attr("d", path)解决方法:您可以使用函数为每个数据项动态构建类属性：var world = svg.selectAll("path.land").data(countries).enter().append("path").attr("class", function(...