草庐IT

javascript - D3 使用新元素更新图形会创建带有错误节点的边

我的代码创建了一个图表并在每个节点上创建了一个轴心点,如果您双击它们,它将获取更多与该节点关联的数据,并有望创建新的链接。现在这是我遇到的问题:我点击了最外面的一个节点,但由于某种原因,新链接被附加到第一个节点(蓝色节点)。知道为什么会这样吗?functiondraw_graph(graph){varcolor=d3.scaleOrdinal(d3.schemeCategory20);varsvg=d3.select("svg"),width=+svg.attr("width"),height=+svg.attr("height"),node,link;svg.append('defs

javascript - 将外部数据从数据库动态加载到 d3.js

我正在尝试让动态重新加载在d3中工作,但我在尝试弄清楚如何从数据库中刷新数据时遇到了问题。我有一个数组,其中包含的值应该每秒更改:vardata=[1,2,3,4];在我最初的脚本中,我让PHP从数据库中提取数据来设置数组,重新加载页面可以正常工作,但我想使用d3的重新加载功能来获取新数据并重新绘制图表.我对js和d3完全陌生,所以任何建议都会非常有帮助。我尝试使用jQuery的get命令来调用输出值的外部PHP脚本,但这似乎不起作用。我基本上是在尝试从GoogleAnalytics实时显示中复制条形图。 最佳答案 首先,您需要在服

javascript - translate3d() 导致 jQuery 悬停/单击事件无法正确触发

在分析不同CSS动画类型上的jQuery鼠标事件时,我注意到translate3d导致悬停和其他事件无法正确触发。在一个基本示例中,我正在为从右到左的block列表设置动画。在鼠标悬停时,我将悬停的LI背景设置为绿色。注意:测试是为webkit构建的HTMLcontentcontent...CSS.container{position:absolute;left:600px;top:0;}.containerul{list-style:none;width:9999px;}.containerulli{width:200px;height:400px;float:left;backgr

javascript - d3.js画笔填充颜色直方图

我用d3.js创建了一些直方图.我设法更改了rect的填充颜色取决于brush的位置.但我想更改rect中的颜色.例如,如果brushstart在rect的中间我想要我的rect有两种颜色。目前这就是我所拥有的:这就是我想要的:我见过一些例子,比如Here.我是d3的新手,我尝试理解代码。我看到他们使用clip-path这肯定会在没有画笔时隐藏背景栏,并在有画笔时显示背景栏,具体取决于画笔的范围。这是一个JSBin更新我已经详细阅读了link中提供的代码.我发现他们不创建制作图表的元素但是barPath喜欢跟随:functionbarPath(groups){varpath=[],i=

javascript - 有条件地递归更改所有节点和边的不透明度(d3)

更新:IhavecreatedaJSFiddlehere.请用你的答案发布一个更新的fiddle。我有动态过滤器,用户可以将其应用于数据,但它们会更改节点的不透明度以指示过滤入和过滤出的内容(过滤后的“out”元素仍然部分可见,并且未使用实际的d3filter()函数(故意地))。我还在每个被过滤掉的节点上设置了一个属性(例如node={"name":"test","isFilteredOut":true};)。所以就这个问题而言,即使我使用了“过滤器”这个词,它实际上只是一个有条件的样式更改(我会尝试在这篇文章的引号中加上“过滤器”这个词来提醒这一点)。这一切都很好,但现在我想递归地

javascript - Webpack 2 没有正确摇树 D3.js

当执行import{select}from'd3'时,Webpack将在包中包含所有的d3.js,如下面的bundlevisualization.所示这个问题可以通过执行import{select}from'd3-selection'来解决,但这有点违背了自动treeshaking的目的。Treeshaking在我们的非库代码的简单情况下似乎确实有效。我们在.babelrc中使用"modules":false以保留模块语法并在我们的中使用'module'resolvewebpack.config.jsresolve:{mainFields:['module','browser','ma

javascript - 将 SVG 文本裁剪到 D3 TreeMap 中矩形的宽度

我想知道是否有比使用剪辑路径更简单的方法来限制文本标签的宽度。这是我正在寻找的有关标签的示例:treemap:请注意,标签被包含图block的边界chop了。该特定示例是使用实现的标签,默认情况下具有此行为。但我正在使用SVG我希望有比定义另一个矩形的单独剪辑路径更直接的方法。 最佳答案 您可以将每个包装起来中的元素相同宽度/高度的元素。默认overflow隐藏在内部元素。 关于javascript-将SVG文本裁剪到D3TreeMap中矩形的宽度,我们在StackOverflow上找到

javascript - d3.js 强制定向布局受形状约束

我想知道是否有一种方法可以使用d3.js创建力导向布局并以任意形状限制它所有节点均等价分布在形状内边界到节点的距离等于节点之间的距离我希望已经有这样的解决方案了。否则我的想法是从力导向布局开始,并在每次迭代中检查节点到边界的距离。你有什么建议吗? 最佳答案 你的想法也是我的。在tick函数中,您可以添加额外的力。这是我的建议(未测试):force.on('tick',function(e){node.each(calcBorderDistance).attr('transform',function(d){d.x-=e.alpha*

javascript - 为什么在维度变量中无法识别 .domain、tickFormat 和 tickValues? (d3,平行坐标)

我正在使用d3.js创建一个平行坐标图,但我很难按照我的意愿格式化轴标签。例如,我的轴之一“缓冲液浓度”绘制在对数刻度上,我通过维度变量指定了它,就像这样。vardimensions=[...{key:"b.Conc",description:"BufferConcentration",type:types["Number"],scale:d3.scale.log().domain([.1,100]).range([innerHeight,0]),tickValues:[.1,.2,.4,.6,.8,1,2,4,6,8,10,20,40,60],tickFormat:d3.format

javascript - 使用 Cypress.js 测试 D3.js 拖动事件

我有一个使用d3-zoom的SVG对象用于缩放和平移功能。它工作完美,但当我开始使用Cypress.js进行集成测试时,问题就出现了。.我尝试在svg元素上使用标准鼠标事件来模拟拖动行为:cy.get('svg').trigger('mousedown',{which:1,force:true}).trigger('mousemove',{position:'left'}).trigger('mouseup',{position:'left',force:true});上面的例子取自Cypressdraganddroprecipe,它会在nodrag.js文件中产生以下错误:canno