Tag: d3.js

你可以在使用d3.js时在文本中插入换行符吗?

我正在寻找一种使用d3.js在工具提示文本元素中使用换行符的方法。 .text("test" + "</br>" + "test") 以上和其他类似的努力似乎并不奏效。 这里有一个线程似乎回答: https://groups.google.com/forum/?fromgroups=#!topic/d3-js/GgFTf24ltjc 但解决scheme不是很清楚。 如何在上述情况下使用.html? .text(.html(“test”+“”+“test”)) 没有工作? 谢谢

testingd3(以及其他基于SVG的)Web应用程序

我有一个Web应用程序,使用d3库来处理一些复杂的基于SVG的可视化。 我有自动testing我的服务器端代码和JavaScript模型(我在我的JavaScript中使用MVC架构)。 这些在每次提交时都在Jenkins CI服务器上运行。 现在我需要弄清楚如何testing我的观点。 别人怎样解决这个问题,你用什么工具? 我有一些想法… 将生成的SVG序列化到文件并与基线进行比较 自动捕捉浏览器图像,并做一个图像差异 别的东西? 谢谢!

D3.JS浏览器支持

具有D3.JS经验的开发人员是否可以指出实际上特定的浏览器和浏览器版本级别最容易支持D3.JS库? 是否有一个D3.JS的“组件”列表,已知不兼容特定的浏览器和浏览器版本级别? D3.JS网站build议: 浏览器支持 D3支持所谓的“现代”浏览器,这通常意味着除了IE8及以下的所有东西。 D3针对Firefox,Chrome(Chromium),Safari(WebKit),Opera和IE9进行testing。 D3的部分function可以在较旧的浏览器中使用,因为D3的核心库具有最低要求:JavaScript和W3C DOM API。 对于IE8,build议使用兼容性库Aight。 D3使用select器API级别1,但是可以预先加载Sizzle以实现兼容性。 你需要一个现代的浏览器来使用SVG和CSS3转换。 D3不是一个兼容性层,所以如果你的浏览器不支持标准,那你倒霉了。 抱歉!” 不过,我希望得到更具体的答案。

如何用selectAllselect多个select器?

是否可以使用selectAll在D3中select多个select器? 我想要像svg.selectAll("class1", "circle", "id2")select所有的circle元素, class1元素和id2元素。 这可能吗?

从dynamicjson数据更新强制有向图上的链接

我是D3新手,正在研究JSON数据是dynamic的强制有向图。 我可以在接收到新数据的时候改变力图,但是这种情况会发生。 创build我的强制图的代码是: <div class="graph"></div> <script> var w = 660, h = 700, r = 10; var vis = d3.select(".graph") .append("svg:svg") .attr("width", w) .attr("height", h) .attr("pointer-events", "all") .append('svg:g') .call(d3.behavior.zoom().on("zoom", redraw)) .append('svg:g'); vis.append('svg:rect') .attr('width', w) .attr('height', h) .attr('fill', 'rgba(1,1,1,0)'); function redraw() { console.log("here", d3.event.translate, d3.event.scale); vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale […]

用D3.js为每个数据成员附加多个非嵌套元素

我想用d3创build多个非嵌套元素来创build一个像这样的结构: <div id="parent"> <p> from data[0] </p> <p> from data[0] </p> <p> from data[1] </p> <p> from data[1] </p> <p> from data[2] </p> <p> from data[2] </p> </div> 创build嵌套结构会像这样 d3.select('#parent').selectAll('p').data(data).enter(). append('p')…append('p') 但我想保持原来的select,即使在追加,所以我可以继续追加到父元素。 谢谢!

如何访问d3.jsselect的父节点?

我创build了以下文件: <g> <path class=​"line" name=​"gene_1" stroke=​"#aec7e8" d=​"M10.47…">​</path>​ <path class=​"line" name=​"gene_2" stroke=​"#aec7e8" d=​"M10.47…">​</path>​ <path class=​"line" name=​"gene_3" stroke=​"#aec7e8" d=​"M10.47…">​</path>​ … </g> 当我把鼠标放在每个path上时,我想把它追加到svg:g的最后面,所以它出现在其他行的顶部,但我不知道如何正确select父节点: function onmouseover(d, i){ var current_gene_name = d3.select(this).attr("name"), current_gene_pcp = d3.select(".line[name=" + current_gene_name + "]"); p1 = this.parentNode p2 = current_gene_pcp[0].parentNode p3 = current_gene_pcp[0][0].parentNode //p.appendChild(this); } 虽然p3返回了正确的<g></g> <html></html> ,但是我想确保“this”是一个.line, <g></g> 。 这最后的版本看起来像是一个等待发生的错误。 有没有更好的办法?

如何禁用d3.behavior.zoom双击缩放?

我不希望d3.behavior.zoom添加在graphics上双击缩放的function。 我怎样才能禁用这种行为? 这是一个JSFiddle与不需要的行为。 我已经尝试了以下没有任何运气。 d3.behavior.zoom.dblclick = function() {};

如何使用D3.js将图像添加到svg容器

我已经创build了一个示例Asp.Net MVC 4应用程序,我已经使用了D3.js来附加一个SVG元素,然后在SVG里面添加了一个文本元素(见下面的代码)。 这一切工作正常,直到我尝试使用本地PNG文件附加img到SVG。 img被附加到DOM,但img不在页面上呈现。 任何想法我在这里做错了,以及如何去解决它? @{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/d3.v3.js"></script> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 200) .attr("height", 100) .style("border", "1px solid black"); var text = svg.selectAll("text") .data([0]) .enter() .append("text") .text("Testing") .attr("x", "40") .attr("y", "60"); var imgs = svg.selectAll("img").data([0]); imgs.enter() .append("img") .attr("xlink:href", "@Url.Content("~/Contenthttp://img.dovov.comicons/refresh.png")") .attr("x", "60") .attr("y", "60") .attr("width", "20") […]

D3.js:使用图像(使用数据中指定的文件名)作为轴上的刻度值

我目前有这个数据: var dataset = [ { "bank": "Bank 1", "img": "Picture1.png" }, { "bank": "Bank 2", "img": "Picture2.png" }, { "bank": "Bank 3", "img": "Picture3.png" } ]; 复杂的现实世界的数据,对吗? 当然。 好吧,我目前有“ 银行 ”作为我的轴上的这个D3.js代码的tick值: var w = 1000; var h = 700; var padding = 30; var wpadding = 120; var svg = d3.select("body") .append("svg") .attr("width", w) […]