Tag: d3.js

从localhost获取json数据以在D3中使用

我正在使用json数据创建D3气泡图。 我正在使用sinatra作为我的应用程序，我的json数据可以在localhost：4567 / data.json中找到 我试过用 var myData = []; $.get(‘data.json’, function(data) { myData = data; console.log(myData); ……. 我在javascript控制台中获得了正确的值，但气泡图表没有呈现。 （如果我从’data.json’复制并粘贴数据并将其设置为var，则其余代码可以工作，但如果我使用$ get方法则不起作用。 您对如何从localhost：4567访问此json数据有任何想法吗？ 非常感激， 蒂姆

触发SVG元素上的Click事件

我有一组svg节点，它们附加了一个click事件监听器。 我还分配了一个nodeId来唯一地标识我的不同节点 var nodeId = 0; nodeGroup.append(“svg:circle”) .attr(“r”, 7) .style(“fill”, “blue”) .style(“stroke”, “orange”) .attr(“data-node-id”, function(d,i) { return nodeId += 1; }) .on(‘click’, nodeInfo); 单击时，节点将触发一个显示节点对象的函数 var nodeInfo = function displayNodeInfo(node){ console.log(node); } 我想要做的是点击一个与svg组分开的按钮来调用这个displayNodeInfo()函数。 该函数应显示上一个或下一个节点，具体取决于所点击的内容。 我认为nodeId会在这里派上用场。 $(“#next-node”).on(“click”, function(e){ displayNodeInfo() //Not sure how to pass the next node here )}; 我对D3很新，并且仍在弄清楚它的原生方法，所以我只是想知道是否有人有类似的任务。 非常感谢！

Ember对移动设备方向的操作更改

我的任务是使用一个ember网站并使其对移动设备做出响应。 其中一个问题是他们使用一个组件来绘制图形（d3）。 当父容器发生更改时，不会重新呈现图形。 在桌面显示器上并没有太多问题，但在移动设备上，绘制的图形在纵向和横向之间是截然不同的。 我想知道是否有办法在窗口设备方向更改上附加一个余烬观察者，无论是通过jquery还是常规的javascript？

d3.js中的一个函数，用于从不同大小的JSON源创建开始和结束节点以及节点和链接文本

我的JSON数据如下所示： var IDData = JSON.stringify([[“node/105173”, “node/38180995”, “Agent”, “Customer”, “1379644.0”, 1, 264.0, “1374903”], [“node/1061”, “node/21373542”, “Agent”, “Customer”, “530848.0”, 1, 3000.0, “529502”]….] 数组数组的长度不同，但元素内部的位置始终相同。 我有以下jquery函数可以迭代这些数据： $(document ).ready(function() { console.log(IDData); var galData = JSON.parse(IDData); var startnodes = []; var endnodes = []; var startnodetype = []; var endnodetype = []; var PayTime = []; var TXN_COUNT = []; var […]

如何将DOM附加到Angular 2组件并仍然获取封装样式

我正在升级现有的Angular 2应用程序，该应用程序大量使用JQuery插件，D3，甚至一些React组件（所有这些都使用sizzle所以我很确定它适用于所有）。 因为一次重写所有这些实际上没有意义，我试图将它们中的一些包装在Angular 2 Component中。 为了向您展示我的意思，我有一个使用Jquery将项添加到DOM的简单组件… import { Component, AfterViewInit, ElementRef } from ‘@angular/core’; declare var $:JQueryStatic; @Component({ selector: ‘px-spinner’, template: String(require(‘./spinner.template’)), styles: [require(‘!raw!stylus-loader!./spinner.styles’)] }) export class SpinnerComponent implements AfterViewInit{ constructor(public el:ElementRef){} ngAfterViewInit(){ $(this.el.nativeElement).append(“Output 2″) } } 这里的问题是样式不适用于输出2.当我看到DOM时，原因变得明显…… output 1 Output 2 由JQuery添加的DOM元素缺少_ngcontent-ylc-1=”” 。 当JQuery注入DOM时，有没有办法让Ng2添加它？ 更新 问题类似于这个问题（ Angular2 – 将[_ngcontent-mav-x]添加到样式中 ）但我想问题是如何在ViewEncapsulation中包含注入的dom？

如何为第1列中的每个唯一项创建包含系列的多系列折线图？

我检查了各种教程，但找不到我的用例。 以下是CSV格式的数据集的子集： Provider,Service date,Unique patients seen 10800,2007-12-03,1 10800,2008-03-21,9 10800,2008-04-16,3 10800,2008-04-18,6 11451,2008-06-27,24 11451,2008-07-10,1 11451,2008-07-14,31 11451,2008-07-15,6 12980,2008-06-17,24 12980,2008-06-27,14 12980,2008-06-28,24 13907,2008-05-04,23 13907,2008-05-05,20 13907,2008-05-08,6 14618,2008-08-27,27 14618,2008-09-04,21 14618,2008-09-05,20 我想要的是每个独特的提供者都有一个系列，该系列的X轴为服务日期，Y轴为患者。 到目前为止，我已经查看了多系列折线图教程 ，但我无法说服它使用我拥有的数据而不是现在使用的数据。 有什么建议或读物吗？ tarek 🙂

在d3中应用转换时出错

我试图在d3中设计的条形图上应用一些过渡效果。 这是我的代码 – svg.selectAll(“.bar”) .data(data) .enter().append(“g”) .attr(“class”, “bar”) .append(“rect”) .attr(“rx”, barRadius) .attr(“fill”,”333″ ) // .attr(“color_value”, “steelblue”) .attr(“index_value”, function(d, i) { return “index-” + d[columns[0]].replace(/[^a-zA-Z0-9]/g, ”, ‘gi’); }) .attr(“class”, function(d, i) { return “bars-Bubble-index-” + d[columns[0]].replace(/[^a-zA-Z0-9]/g, ”, ‘gi’)+div; }) .attr(“id”, function(d) { return d[columns[0]] + “:” + d[measure1]; }) .attr(“onclick”, fun) .attr(“x”, function(d) { return x(d[columns[0]]); […]

在将src动态设置为dataURI时，Img.onload不会触发

当imgGraph的src加载了生成的dataURI时，我无法触发onLoad处理程序。 dataURI是使用canvas从d3.js可视化（svg）生成的。 var canvas = document.getElementById(visual + ‘-canvas’); if(visual == “graph”){ console.log(‘graph logic n stuff’) canvas.width = 558; canvas.height = 558; var graph = d3.select(‘#graph-svg’).node(); var svg_xml = (new XMLSerializer()).serializeToString(graph); var imgGraph = new Image(); var context = canvas.getContext(‘2d’); var imageData; imgGraph.onload = function(){ console.log(‘img loaded’) context.drawImage(imgGraph, 0, 0); imageData = getImgData(canvas); console.log(imageData) def.resolve(imageData) } […]

下拉按钮可过滤d3.js图表

我有一个工作正常的图表，甚至过滤按钮点击数据。 现在我尝试使用下拉按钮而不是常规按钮。 当用户从下拉列表中选择Amount为1000或2000时，应根据属性筛选节点和链接 d.total_amt> 1000 or d.total_amt > 2000 HTML .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } div.tooltip { position: absolute; background-color: white; max-width: 200px; height: auto; padding: 1px; border-style: solid; border-radius: 4px; border-width: 1px; box-shadow: 3px 3px […]

D3：格式化刻度值。 显示B（十亿）而不是G（千兆）

我想在D3线图中格式化Y轴数据。 这是关于世界人口，所以这是非常大的。 我目前正在使用下面的代码，它显示“G”而不是“B”。 d3.format(“s”) 我研究并发现Giga的“G”站点，是否有办法将其改为B表示Billion？ 谢谢。