Tag: d3.js

D3力导向图：为什么不出现标志？: 情况：每个node都应该有相应的标志，事实并非如此。码： body { font-family: Lato; background-color: #F5F5F5; } .title { margin-top: 30px; margin-bottom: 30px; } #results { text-align: center; } #results div { margin-top: 15px; } #results { background-color: white; margin: auto; width: 1200px; padding: 40px; box-shadow: 2px 2px 2px black; } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */ .flag […]

D3js – 将垂直条形图更改为水平条形图: 我有一个成对分组的垂直条形图。我试图玩弄如何水平翻转它。在我的情况下，关键字会出现在y轴上，而比例会出现在x轴上。我尝试过切换各种x / yvariables，但这当然只是产生了时髦的结果。我需要关注哪些代码区域，以便将其从竖线切换到横线？ My JSFiddle: Full Code var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0, w], 0.05); // ternary operator to determine if global or local has a larger scale var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function (d) { return (d.local > d.global) ? d.local : d.global; })]) .range([h, 0]); var xAxis = […]

d3节点标签: 我一直在使用这个D3项目的示例代码来学习如何显示D3graphics，我似乎无法让文字显示在圆圈中间（类似于这个例子和这个例子）。我看了其他的例子，并试图添加 node.append("title").text("Node Name To Display") 和 node.append("text") .attr("text-anchor", "middle") .attr("dy", ".3em").text("Node Name To Display") 刚刚定义了节点之后，但我看到的唯一结果是当我将鼠标hover在每个节点上时，“显示的节点名称”正在显示。它没有显示为圈内的文字。我是否必须编写自己的svg文本对象，并根据圆的半径坐标确定需要放置的坐标？从另外两个例子来看，似乎D3已经在某种程度上关心了这一点。我只是不知道调用/设置的正确的属性。

你如何在d3.js中创build一棵家族树？: 我目前正在做一个小型的家谱实验，想要实现一个简单的家谱，如下图所示。迄今为止，最好的search结果只能得出一个例子，其中一个孩子只能有一个父节点。但是我需要的是能够创build实体之间的链接（从父亲到母亲）以及节点和其他链接（从孩子到父母链接）之间的链接。目前我没有一个固定的数据模式。我select了d3.js ，因为它看起来能够完成这项工作。我只是不知道如何甚至从哪里开始。有关d3.js的教程仅涵盖像条形图这样的标准图表。我希望有人能帮助我。

D3强制布局 – 按名称而不是索引链接节点: 我试图链接d3节点的ID而不是索引（节点ID由我的应用程序生成）。这是我的节点： "Nodes": [ { "Id": "338", "Name": "TEST NODE ONE", "Url": "http://www.google.com" }, { "Id": "340", "Name": "TEST NODE TWO", "Url": "http://www.yahoo.com" }, { "Id": "341", "Name": "TEST NODE THREE", "Url": "http://www.stackoverflow.com" }, { "Id": "342", "Name": "TEST NODE FOUR", "Url": "http://www.reddit.com" } ] 他们目前通过索引链接： "links": [ { "source": 0, "target": 0, "value": "0" […]

d3添加文字圈: 我正在试图添加一些文字到圈子里。我一直在从http://mbostock.github.com/d3/tutorial/circle.html下面的例子，但无法得到正确的输出。代码片段是： var data; var code; d3.json("/json/trace.json", function(json) { data = json; console.log(data); // get code for visualization code = data["code"]; alert(code); var mainSVG = d3.select("#viz") .append("svg") .attr("width", 900) .attr("height", 900); mainSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 100) .attr("cx", 300) .attr("cy", 300); circle = mainSVG.selectAll("circle").data([code]); }) ; 任何build议如何获得这项工作？非常感谢！

在转换结束时调用callback: 我需要使用D3.js制作一个FadeOut方法（类似于jQuery）。我需要做的是使用transition()将不透明度设置为0。 d3.select("#myid").transition().style("opacity", "0"); 问题是我需要一个callback来实现转换完成。我怎样才能实现callback？

有没有办法告诉crossfilter将数组的元素视为单独的logging，而不是将整个数组视为单个键？: 我有数据集，其中一些字段值是数组，我想使用crossfilter和d3.js或dc.js来显示数据集中每个值的数量的直方图。这是一个例子： var data = [ {"key":"KEY-1","tags":["tag1", "tag2"]}, {"key":"KEY-2","tags":["tag2"]}, {"key":"KEY-3","tags":["tag3", "tag1"]}]; var cf = crossfilter(data); var tags = cf.dimension(function(d){ return d.tags;}); var tagsGroup = tags.group(); dc.rowChart("#chart") .renderLabel(true) .dimension(tags) .group(tagsGroup) .xAxis().ticks(3); dc.renderAll(); 和JSFiddle http://jsfiddle.net/uhXf5/2/ 当我运行这个代码时，它产生如下的graphics：但是我想要的是这样的：为了使事情变得更复杂，能够点击任何行并通过被点击的标签来过滤数据集将是非常棒的。任何人有任何想法如何实现？谢谢，Kostya

如何在d3中以编程方式调用“click”事件？: 我想这样（也在https://gist.github.com/1703994 ）： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.27.2"></script> <script type="text/javascript" src="js-libs/jquery-1.7.js"></script> <style> <!– #test { width: 400px; height: 500px; } –> </style> </head> <body> <script type="text/javascript"> $(function() { var w = 600, h = 350; var vis = d3.select("#test").append("svg:svg") .attr("width", w) .attr("height", h) .append("svg:g") .attr("transform", "translate(" + w / […]

csv到d3.js中的数组: 我正在使用这个parsingcsv文件，并创build一个数组数据在d3文档中指定： d3.csv("afile.csv", function(data) { data.forEach(function(d) { d.date = formatDate.parse(d.date); d.price = +d.price; }); 但是，如果在这个方法之后，我尝试调用data[0]它说它是未定义的。这是因为data是一个引用，一旦d3.csv()超出范围被销毁？如果是这种情况，我该如何克服这一点。我需要从d3.csv()引用数据