Tag: d3.js

在Google地图上覆盖d3path？: 我正在尝试使用d3.geo和GeoJson将地图叠加到Google地图上。我设法强制d3使用Google Map的投影来绘制path，这非常简单。以下是我到目前为止： http://www.caudillweb.com/temp/d3_choropleth.html 这适用于我放大和缩小：但是当我平移时，SVG叠加也会移动，并且由于它的大小是固定的，所以形状会被截断：有没有人得到这样的工作？任何想法，我可以从这里去？上面的例子是一个单独的自包含的HTML文件，如果有人想玩它。

在D3中添加图表图例: 我无法添加图表图例到我的d3js图表。这是我目前的做法： var legend = svg.append("g") .attr("class", "legend") .attr("x", w – 65) .attr("y", 25) .attr("height", 100) .attr("width", 100); legend.append("rect") .attr("x", w – 65) .attr("y", 25) .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return color_hash[dataset.indexOf(d)][1] }); legend.append("text") .attr("x", w – 65) .attr("y", 25) .text(function(d) { return color_hash[dataset.indexOf(d)][0] + ": " + d; }); 然后，我试图设置.legend类的样式： .legend { […]

d3更新数据和更新graphics: 我在d3中有以下简单的一行，但没有一个问题，试图找出如何传递data2和更新行以反映更改。 <!DOCTYPE html> <html lang="en"> <head> <title>D3 Line Chart Demo</title> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="d3.min.js" type="text/javascript" charset="utf-8"></script> <body> <button class="first last" onclick="transition()"> Update </button> <div id="chart"></div> </body> <script> var data = [3, 7, 9, 1, 4, 6, 8, 2, 5]; var data2 = […]

d3.js和chart.js之间的比较（仅适用于图表）: 我曾多次在我的项目中使用过chart.js，但从未使用过d3.js。很多人都说d3.js是图表最好的javascript框架，但是没有一个能够解释为什么，特别是当我想和chart.js比较的时候。我发现这个： http : //www.fusioncharts.com/javascript-charting-comparison/但它不是我正在寻找。有没有人知道在可用性和性能方面比较这些框架（仅适用于图表）？

与nvd3.js的实时线图: 我正在尝试使用nvd3.js创build一个实时graphics，这个graphics会定期更新，并带有数据被实时处理的印象。现在我已经能够创build一个定期更新graphics的函数，但是我不能像在向左转换的行那样在“状态”之间进行平滑过渡。这里是我使用nvd3.js，这里有趣的代码是： d3.select('#chart svg') .datum(data) .transition().duration(duration) .call(chart); 现在，我已经能够使用d3.js来生成我想要的东西，但我更愿意使用nvd3.js提供的所有工具。这是我想用nvd3制作的使用d3.js进行转换的有趣代码是： function tick() { // update the domains now = new Date(); x.domain([now – (n – 2) * duration, now – duration]); y.domain([0, d3.max(data)]); // push the accumulated count onto the back, and reset the count data.push(Math.random()*10); count = 0; // redraw the line svg.select(".line") […]

绑定的JavaScript（d3.js）shiny: 首先，我对JavaScript和它的库d3.js相当不熟悉，但是我对R很熟悉。使用Shiny创build仪表板非常有趣和简单（感谢stackoverflow）。现在我想通过连接d3元素来扩展它。我正在寻找信息来源，关于如何实际绑定到shiny（R仪表板）的JavaScript和解释实际发生了什么。背景：我在w3schools上做了关于js和jquery的教程，并且使用Scott Murray的书（交互式数据可视化为web）了解了d3。我希望这足以让我理解有关如何在Shiny网站上构build自定义input/输出绑定的示例和解释： http://shiny.rstudio.com/articles/building-inputs.html 但不幸的是，我没有，我似乎无法find任何在最小工作代码的例子。 github上的很多例子对于我来说很复杂，很可能是因为我对javascript的一点经验。以下是使用javascript自定义input绑定的示例： https://github.com/jcheng5/shiny-js-examples/tree/master/input 下面是我尝试展开的一个input和输出绑定的示例： <script src="../../../d3.v3.js"></script> <script type="text/javascript"> (function(){ // Probably not idiomatic javascript. this.countValue=0; // BEGIN: FUNCTION updateView = function(message) { var svg = d3.select(".d3io").select("svg") svg.append("text") .transition() .attr("x",message[0]) .attr("y",message[1]) .text(countValue) .each("end",function(){ if(countValue<100) { countValue+=1; $(".d3io").trigger("change"); } }) } // END: FUNCTION //BEGIN: OUTPUT BINDING var d3OutputBinding […]

将“onclick”事件附加到D3图表背景: 我有一个D3直方图图表，我在其上附加了一个“onclick”事件： … var bar = svg.selectAll(".bar") .data(data) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + x(dx) + "," + y(dy) + ")"; }) .on('mouseover', tip.show) .on('mouseout', tip.hide) .on('click', function(d,i){ //do stuff }); … 这完全按照预期工作。我还想在图表的背景（即图表中不是酒吧的任何地方）添加一个“onclick”事件，但是我遇到了这个问题。我已经尝试过以两种方式附加事件，但是在任何情况下，这个新事件似乎都会覆盖我的栏点击：有些尝试： $("svg:not('.bar')").on("click", function(){ //do stuff }); $("g:not('.bar')").on("click", function(){ //do stuff }); var svg = d3.select("#histogram_block").append("svg") .attr("width", width + […]

如何在d3中的rect元素中居中文本？: 我创build了一个d3可视化，它接收一组数据，为每个数据点创build一个矩形，然后在矩形中显示文本。但是，我只通过给它坐标得到文本显示在矩形内部。我想知道如何告诉它以rect元素为中心。这里是代码： var elementTags = ["Google", "Amazon", "Wikipedia", "Yahoo!", "Messi", "Ronaldo", "One", "Two", "Three", "Monkey"]; 接下来的部分创build了我用来定位rects的数组 var xPosLoop = [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3]; var yPosLoop = [0, 0, 0, 0, 1, 1, 1, […]

将JavaScript生成的SVG转换为文件: 我正在使用d3.js来可视化一些数据。我希望能够将它生成的SVG代码存储为.svg图像文件（用于Inkscape / Illustrator中的编辑）。我试图简单地复制svg标签的内容即 <svg> <!–snip–> </svg> 到一个名为image.svg的文件中，但是这会遗漏在两个单独的CSS文件中的颜色/样式信息上。我正在使用这个例子。有一个简单的方法来做到这一点？

可以input（）select追加/插入后重用吗？: 我有一个场景，我想要使用数据连接为每个数据元素附加2个新的元素。我原本是这样做的： var y = d3.selectAll("line") .data([123, 456]); y.enter().append("line"); // assume attr and style set y.enter().append("line"); y.transition()… 在我思考之前，我期待在我的转换中使用的更新select将包含来自输入select的合并附加。但是，这当然不起作用，因为每个数据元素的select只有一个插槽。所以我改变了代码，使它仍然使用两次相同的enter（）select，但是为了进行转换而重新select新的元素。这种方法奏效，但我的问题是这是否是一个推荐的方式去做事情。在追加/插入后，我是否应该确保停止使用enter（）？或者可以使用它来创build多个元素，只要我记得更新select将只包含最后创build的元素？如果事实certificate这是错误的，有什么更好的方法来实现呢？