程序设计 d3.js

5

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，该消息应被用作背景的框包围。它们应彼此完全对齐，并与矩形（顶部和中心）完全对齐。做这个的最好方式是什么？我尝试使用“ x”，“ y”，“ width”和“ height”属性添加svg文本，然后在svg rect之前添加。问题是文本的参考点在中间（因为我希望它居中对齐，所以我使用text-anchor: middle），但是对于矩形，它是左上角的坐标，而且我想在文本周围留一点空白，使它有点像痛苦。另一种选择是使用html div，这会很好，因为我可以直接添加文本和填充，但是我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？

91 javascript svg d3.js tooltip

1

向力导向布局添加新节点

关于堆栈溢出的第一个问题，请多多包涵！我是d3.js的新手，但是一直被其他人能够完成的工作感到惊讶...几乎令我惊讶的是，我本人可以用它取得多少进展！显然，我没有在偷东西，所以我希望这里的善良灵魂能够向我展示光明。我的意图是制作一个可重复使用的javascript函数，该函数可以简单地执行以下操作：在指定的DOM元素中创建空白的力导向图允许您向该图中添加和删除带有标签的带有图像的节点，并指定它们之间的连接我以http://bl.ocks.org/950642作为起点，因为这实际上是我想要创建的布局：这是我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="d3.v2.min.js"></script> <style type="text/css"> .link { stroke: #ccc; } .nodetext { pointer-events: none; font: 10px sans-serif; } body { width:100%; height:100%; margin:none; padding:none; } #graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; } </style> …

89 javascript d3.js force-layout

3

GeoJSON和TopoJSON之间的区别

GeoJSON和TopoJSON有什么区别，何时可以在另一个之上使用？该TopoJSON的GitHub上的描述意味着TopoJSON文件小80％。那么，为什么不一直使用TopoJSON？

89 d3.js gis geojson topojson

1

D3 javascript foreach和每个之间的区别

是什么区别forEach，并each在D3js？

88 javascript d3.js

4

d3.js和chart.js之间的比较（仅适用于图表）

已关闭。这个问题需要更加集中。它当前不接受答案。想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 10小时前关闭。改善这个问题我已经在项目中多次使用chart.js，但从未使用过d3.js。许多人说d3.js是用于图表的最佳javascript框架，但是它们都无法解释原因，尤其是当我想与chart.js进行比较时。我发现了这一点：http : //www.fusioncharts.com/javascript-charting-comparison/ 但这不是我想要的。有谁知道这些框架在可用性和性能方面的比较（仅适用于图表）？

88 javascript d3.js charts chart.js

5

如何从节点中删除所有子元素，然后以不同的颜色和大小再次应用它们？

因此，我有一个用于设置节点，链接和其他元素的下一个力布局图代码： var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", …

87 d3.js force-layout

3

Protovis与D3.js

TLDR：有没有人同时拥有protovis和D3.js的经验来阐明两者之间的差异？在过去的两个星期中，我一直在与protovis一起玩，到目前为止，一切都很棒。除了现在，我似乎在动画方面有点撞墙。 protovis：http：//vis.stanford.edu/protovis/ 我想做一些非常简单的动画，但是使用protovis感觉不那么直观-我开始认为protovis从未真正用于动画。因此，我开始查看D3.js： http://mbostock.github.com/d3/ex/stack.html 看起来非常相似，但是：似乎更轻巧似乎适合与其他DOM元素以及SVG进行交互似乎适合添加动画任何人都可以阐明其他差异吗？我非常感谢您提供的所有信息

84 javascript protovis d3.js

2

d3.scale.category10（）的d3.js v4.0是什么？

我正在尝试使用“交互式Web可视化”书学习d3，但是4.0版已经发生了很多变化。我真的不知道的一件事是，是否有d3.scale.category10（）的等效项可以轻松映射到颜色。在新版本中是否存在类似的内容，还是我们需要使用math.random自己编写一些内容？

82 d3.js

10

使用D3更新SVG元素Z-索引

使用D3库将SVG元素置于z顺序顶部的有效方法是什么？我的特定情况是一个饼图其中突出（通过添加stroke到path）当鼠标在给定的片。生成我的图表的代码块如下： svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); }) .attr("stroke", "#fff") .attr("stroke-width", 0) .on("mouseover", function(d) { d3.select(this) .attr("stroke-width", 2) .classed("top", true); //.style("z-index", 1); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke-width", 0) .classed("top", false); //.style("z-index", -1); }); 我尝试了几种方法，但到目前为止还没有运气。同时使用style("z-index")和调用classed均无效。在我的CSS中，“ top”类的定义如下： .top { fill: red; z-index: 100; …

81 javascript svg d3.js

3

旋转d3中的x轴文本

我是d3和svg编码的新手，正在寻找一种在图表的xAxis上旋转文本的方法。我的问题是通常xAxis标题的长度超过条形图中的条形宽度。所以我想旋转文本以使其在xAxis下垂直（而不是水平）运行。我尝试添加transform属性：.attr（“ transform”，“ rotate（180）”）但是，当我这样做时，文本完全消失了。我曾尝试增加svg画布的高度，但仍然无法查看文本。任何关于我做错事情的想法都很棒。我还需要调整x和y位置吗？并且，如果是这样，增加多少（当我在Firebug中看到它时很难进行故障排除）。

81 text svg transform d3.js

6

有没有办法放大D3力布局图？

D3具有指向布局的力量在这里。有没有一种方法可以向该图添加缩放？目前，我能够捕获鼠标滚轮事件，但不确定如何编写重绘函数本身。有什么建议么？ var vis = d3.select("#graph") .append("svg:svg") .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function .attr("width", w) .attr("height", h);

80 javascript jquery d3.js zoom force-layout

2

Javascript库d3调用函数

我无法理解d3.call（）的工作原理以及何时何地使用它。这是我要完成的教程链接。有人可以请您具体解释这件作品在做什么 var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); svg.append("g").call(xAxis);

79 javascript d3.js

4

在Angular 2中使用D3.js

我已经成功将Angular 2（Alpha 44）与D3.js集成在一起： <html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <script> System.config({packages: {'app': {defaultExtension: 'js'}}}); System.import('app/app'); </script> </head> <body> <my-app>Loading...</my-app> </body> </html> app.js： /// <reference path="./../../typings/tsd.d.ts" /> import {Component, bootstrap, ElementRef} from 'angular2/angular2'; @Component({ selector: 'my-app', template: '<h1>D3.js Integrated if background is yellow</h1>', providers: [ElementRef] …

78 angular d3.js

5

D3.js：“未捕获的SyntaxError：意外的令牌非法”？

我刚刚从d3js.org下载了D3.js（链接到zip文件），将其解压缩，并在以下HTML页面中对其进行了引用： <html> <head> <title>D3 Sandbox</title> <style> </head> <body> <script src="/d3.v3.js"></script> </body> </html> 但是，当我加载此页面时，我的控制台（在Chrome中）显示以下错误： Uncaught SyntaxError: Unexpected token ILLEGAL: line 2 它不喜欢文件开头的pi和e符号。Errrr ...对此我该怎么办？我正在使用python的SimpleHTTPServer提供文件。更新：是的，我知道我可以链接到CDN版本，但是我希望在本地提供文件。

77 javascript d3.js

2

D3.js前置（类似于jQuery前置）

我喜欢D3中append的用法，并且正在寻找前置。这在D3中存在吗？

75 javascript d3.js prepend

Questions tagged «d3.js»