我想在D3.js中制作决策树并在链接上添加文本。varmargin={top:20,right:20,bottom:30,left:40},width=960-margin.left-margin.right,height=500-margin.top-margin.bottom,rect_width=90,rect_height=20;vartree=d3.layout.tree().size([height*2,width/2]);vardiagonal=d3.svg.diagonal().projection(function(d){return[d.x,d.y];});vars
我有一个asp.netmvc网站andamusingjavascripttreemapcontrol显示热图。这个控件效果很好,但我想看看我是否可以将其他一些json字段粘贴到用于更新另一个div的回调中。有谁知道这是否可能。现在我必须来回跳转并执行2个单独的ajax调用,但我想看看我是否可以将此信息与TreeMapjson响应一起传递。 最佳答案 您需要做的是一次调用,您可以在其中自行计算回调。这里的json将是这样的结构vardata={heatmap_data:{}other_data:{}}和下一个电话tm.loadJSON
我是D3的新手,我发现它非常令人羞愧。我的目标是从CSV文件制作树状图。我想使用CSV格式,因为我将处理电子表格中的值,而且以这种方式保存文件对我来说很容易。我正在尝试以分层格式存储数据,类似这样(hier.csv):parent,child,valueHomerSimpson,Bart,20HomerSimpson,Lisa,14HomerSimpson,Maggie,6PeterGriffin,Chris,19PeterGriffin,Meg,12PeterGriffin,Stewie,9我正在使用这个ZoomableTreemapexample.我希望树可以任意深,即如果Bart
我目前正在试验d3.js的画廊TreeMap。http://bl.ocks.org/4063582现在我想知道是否可以让树状图以正方形呈现所有项目。我只能让它渲染矩形。我尝试使用.mode("squarify");但这不会产生所需的布局。它不会使用所有可用空间并不重要。我只是想让它渲染正方形。 最佳答案 平方TreeMap:http://www.win.tue.nl/~vanwijk/stm.pdf.它看起来像是对问题的彻底审视,并包含解决方案伪代码。Abstract.Anextensiontothetreemapmethodfor
我正在尝试根据以下示例向D3v4中的树状图添加缩放行为:1和2.它是用HTML元素而不是SVG构建的,我通过使用百分比而不是像素单位使其响应。到目前为止效果很好,但现在我想通过单击放大到单个单元格,直到到达最后一个子单元格。然后单击将返回到树的根。到目前为止,这是我的代码:http://codepen.io/znak/pen/qapRkQ我正在努力使用V4中可用的缩放功能,它无处不在:functionzoom(d){console.log('clicked:'+d.data.name);x.domain([d.x0,d.x1]);y.domain([d.y0,d.y1]);vart=d
我想知道是否有比使用剪辑路径更简单的方法来限制文本标签的宽度。这是我正在寻找的有关标签的示例:treemap:请注意,标签被包含图block的边界chop了。该特定示例是使用实现的标签,默认情况下具有此行为。但我正在使用SVG我希望有比定义另一个矩形的单独剪辑路径更直接的方法。 最佳答案 您可以将每个包装起来中的元素相同宽度/高度的元素。默认overflow隐藏在内部元素。 关于javascript-将SVG文本裁剪到D3TreeMap中矩形的宽度,我们在StackOverflow上找到
我目前正在尝试用Javascript实现TreeMap算法。更具体地说,算法在SquarifiedTreemaps中描述。.给出的伪代码如下所示:proceduresquarify(listofrealchildren,listofrealrow,realw)beginrealc=head(children);ifworst(row,w)但是我的JavaScript看起来像:varc=children[0];if(worst(row,w)>=worst(row.concat(c),w)){this.squarify(children.splice(1),row.concat(c),w)
我正在使用D3.js构建一个在TreeMap中显示数据的应用程序。理想情况下,我想要的是为TreeMap提供一个工具提示,以在TreeMap的每个节点上显示更多信息。树形图从.JSON文件中获取数据。我目前正在使用jquery插件PoshyTip,我可以在其中通过title=属性传递此信息。我知道我需要以某种方式将title属性添加到TreeMap中的svg:g元素,但我不知道在哪里设置每个节点的titleattr。这是我的脚本的开头,我在其中进行所有声明等...vartree=d3.layout.tree().size([h,w-160]);vardiagonal=d3.svg.di
我需要创建一个自定义的d3布局,它有点接近树状图,但采用三Angular形样式。这是一个屏幕截图,以便您可以理解:Pyramidlayout如您所见,它工作起来非常简洁,符合我的需要。为了对其进行编码,我将代码基于TreeMap布局代码:d3.layout.pyramid=function(){varhierarchy=d3.layout.hierarchy(),round=Math.round,size=[1,1],padding=0;functionpopulate(nodes,currentHeight,currentHeightPadded,currentBase,curren
我正在使用D3.js绘制一个可折叠的树状图,如example中所示.它运行良好,但当它进入其正常功能时,图表的大小可能会发生巨大变化(即,我将拥有更多很多节点,而不是我现在拥有的几个节点)。我想让SVG区域滚动,我已经尝试了我在网上找到的所有方法来让它工作,但没有成功。我得到的最好的工作是使用d3.behaviour.drag,我在其中拖动整个图表。它远未达到最佳状态并且有很多故障,但它还算可用。即便如此,我还是试着稍微清理一下,我意识到d3.behaviour.zoom也可以用来平移SVG区域,根据API文档。问题:谁能解释一下如何使其适应我的代码?我希望能够使用图表平移SVG区域,