Tag: d3.js

D3在一页上的每个图表的鼠标hover效果

我在一个页面上有多个d3图表,并希望为每个图表添加一个鼠标hover效果。 此刻只有一个图表受到影响,并具有鼠标hover效果。 我用多个图表创build了一个例子。 这是小提琴: http : //jsfiddle.net/zumdpjzx/ for( var i= 1; i < 3; i++){ console.log(i); var arrData = [ ["2014-08-20", 100, 100], ["2014-08-21", 95, 85], ["2014-08-22", 93, 71], ["2014-08-23", 88, 57], ["2014-08-24", 86, 42], ["2014-08-25", 98, 28], ["2014-08-26", 117, 14], ["2014-08-27", 123, 0] ]; arrData = arrData.sort((function(index){ return function(a, b){ return (a[index] === b[index] […]

D3 js有条件地跳过符号

以下代码在多系列折线图上添加了符号。 我想跳过所有特定系列的符号。 我们是否可以有条件地跳过从多系列折线图中添加的单个系列? lineChart.selectAll("g.dot") .data(d3Data) .enter().append("g") .attr("class", "dot") .style("fill", "red") .style("stroke", "red") .selectAll("svg:path") .data(function(d) { return d.data; }) .enter().append("svg:path") .attr("transform",function(d){return "translate("+x(d.key)+","+y(d.value)+")";}) .attr("d", d3.svg.symbol().type(d.seriesSymbol).size(22)); 如果我将d.seriesSymbol值设置为任何垃圾值的空白,则默认情况下d3会显示圆。 我不想要这个圈子被显示。 我正在编写d3.js代码。 我们有没有“没有”types的关键字跳过符号?

将variables值replace为另一个值

yMax = 100; this.dataBoundaries = { x: function () { var lastCol = that.extractLastColumn(); return [d3.min(lastCol), d3.max(lastCol)]; }, y: [ 0, 100 ] }; console.log(this.dataBoundaries); 上面的代码将导致打印y与另一个值而不是[0,100] => [0,34 …..],为什么会发生这种情况?

webpack能输出单独的浏览器和节点的脚本和模块文件吗?

我正在使用webpack来创build一个可以被浏览器加载的JavaScript对象(在一个脚本标签中),但是我也想让webpack创build一个可以被node加载的模块(它需要module.exports = )。 有没有办法让webpack做两个文件; 例如一个project.js和project.node.js ? 或者我正在做这个错误的方式? D3 JavaScript库似乎正在做这样的基于它的package.json { "main": "build/d3.node.js", "browser": "build/d3.js", … }

如何将替代深度值只分配给d3js中的子节点?

现在所有的节点都有固定的深度。 我怎样才能分配一个替代值只有子节点 我尝试改变值nodes.forEach(function(d) { dy = d.depth * 200; }); 但它会影响所有的节点。 我想要这样的输出:

仅在存在新信息时扫描AWS DynamoDBlogging

我正在努力想出一些看似简单的东西。 这是一些上下文:我有一个Web应用程序,其中有6个图表由D3供电,这些数据存储在DynamoDB中的一个表中。 我正在用awssdk使用AWS和NodeJS。 当需要添加新的信息时,我需要实时更新图表。 我目前已经设置了扫描函数,每个图表每30秒运行一次,但是,当我有多个用户时,它会导致数据库被点击很多次,以至于最大化读取。 我希望这样,当数据库中的数据更新时,服务器可能会将这些数据保存到文档中,以便用户可以轮询而不是数据库本身,并且在将新信息添加到数据库时,该文档将会简单更新。 基本上,有任何方式只有在有新信息时才能扫描dynamodb。 我正在考虑使用stream,但是我完全失去了从哪里开始,如果这是最好的方法。

d3js大型有力graphics服务器端模拟

我正在创造一个有几千个节点的有力图。 正如你可能猜到的那样,交互式模拟很慢,浏览器也会被冻结,就像其他文章中提到的那样。 然而,对于我来说,静态的力图是不够的,我仍然需要用节点之间的力量来操作graphics,以获得很好的布局。 我不太在乎模拟的平滑性。 我的目标是:1.浏览器不会被冻结; 2.我可以用一个节点之间的力量将一个节点从一个地方拖到另一个地方。 而且,可视化节点位置的时间间隔可能会更长。 我正在考虑将node.js中的节点位置计算 很多关于在服务器端预渲染d3graphics的文章 ,但是我需要在服务器端进行所有的模拟计算,并与前端用户进行交互。 所以,我可能需要注册监听器来在node.js中“拖动”,“缩放”,“鼠标hover”动作。 我不确定是否有一个简单的方法来做到这一点。

D3转换工作在nodejs上吗?

我正在使用链接https://gist.github.com/Caged/6407459中提供的代码。 SVG生成良好,并在浏览器上显示。 但是我不能在这个代码中使用D3的.transition和.on函数。 这些函数是否和nodejs一起工作?

如何通过Google CAJA传递图书馆?

有谁知道我是否可以configurationGoogle Caja,所以它让一些确切的图书馆工作,而不是消毒? 我有我自己的CAJA服务器和基于NodeJS的应用程序。 我将传递给Google CAJA用户代码,这些代码主要与图表和graphics相关,但所有库函数(如d3js,chart.js)都被CAJA阻止。 所有的库都经过Caja并连接到用户的文档没有错误,但是如果用户请求任何库的function(例如d3.select("body").append("svg") ),那么它显示错误,就像this * is not a function 。 有谁知道任何方法? PS我知道的URI政策,但它似乎只是控制所有的东西,这是走出了相同的起源的域名,每当甚至如果图书馆通过uriPolicy通过,它仍然由Caja检查。

我如何有一个特定的d3节点是一个在有向图中的图像?

我做了一个看起来类似于此的力量指示图。 我希望中心的Nine Inch Nails节点是一个图像,但其余的节点只是圆圈。 在回答这个问题之后 ,似乎并不难,但我无法理解svg,defs,patterns和d3的组合。 我的代码是: var simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-50)) .force("collide", d3.forceCollide().radius(function (d) { return 15 – d.group}).strength(2).iterations(2)) .force("link", d3.forceLink().id(function(d, i) { return i;}).distance(20).strength(0.9)) .force("center", d3.forceCenter(width/2, height/2)) .force('X', d3.forceX(width/2).strength(0.15)) .force('Y', d3.forceY(height/2).strength(0.15)); var link = svg.append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .enter().append("line") var defs = svg.append('svg:defs'); defs.append("svg:pattern") .attr("id", "vit-icon") .attr("width", 48) .attr("height", 48) .attr("patternUnits", […]