Tag: d3.js

D3.js树通过node.name点击R Shiny

我想先解决我的意图 1）在Shiny中创build一个预定义的D3.js可折叠树 2）点击一个节点，这个特定节点的名字从D3.js传递到R进一步的操作。 那么在这个时候，我在Shiny中有一个预定义的D3.js可折叠树。 我为下面的js，server.R和ui.R提供了代码。 现在，我只是有一个互动的graphics，但我想更进一步。 只要我点击一个节点，我想获得节点的名称作为一个variables。 我做了我的研究（主要在这里： https : //github.com/metrumresearchgroup/SearchTree ），所以我知道，我必须使用d3OutputBinding创build一个新的variables。 我进一步发现了这一点 .on('click', function(node) { alert(node.name); 至less会popup一个带有节点名称的消息。 所以我认为，我必须使用类似的东西 var d3OutputBinding = new Shiny.OutputBinding(); $.extend(d3OutputBinding, { find: function(scope) { return $(scope).find('.div_tree2'); }, renderValue: function(el) { var svg = d3.select(el).select("svg"); … function update(source) { … nodeEnter = node.enter().append("g") .on('click', function(node) {var nodes1 = node.name; }); … […]

如何正确安装dc.js以使用Rails 5？

我正在探索dc.js，这将为我的数据质量分析应用程序提供强大的function。 但是我对如何设置库以使其完全运行变得疯狂： D3安装得益于d3导轨gem 使用npm install dc安装dc.js只需返回dc@2.1.6 ../../../node_modules/dc，但不带任何function。 通过引用dc.js <script src="https://dc-js.github.io/dc.js/js/crossfilter.js" 等 <script src="https://dc-js.github.io/dc.js/js/dc.js"></script> 生成错误，如d3.time是未定义的。 （直stream只依赖于D3 3.x？）。 将http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.js和http://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min .css提供最新的代码？ 但是如果我在防火墙后面的场所需要它，会发生什么？ 我应该在本地下载并复制所有的图书馆吗？ 最后，哪个是干净，精益推荐的实现dc.js的方法？ 谢谢。

node.js中d3和mongo之间的冲突

在需要mongo的模块（connect-mongo）之前需要d3.js时，出现以下错误： TypeError: Cannot read property 'BSON' of undefined at …/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/index.js:48:44 如果我在mongo模块之后需要d3.js，它可以正常工作。 我不是第一个遇到这个问题，但我不明白什么是冲突如何适当地在Node.js中使用D3？

d3.js queue.js和node.js

我想在nodejs中加载数据，然后传递给expressjs在浏览器中渲染d3图表。 我知道我可以从这里加载数据 – https://github.com/mbostock/queue 我有一个expressjs路由configuration像这样 – var d3 = require('d3') ,queue = require("queue-async") ; router.get('/', handler1); function handler1(req, res) { queue() .defer(d3.json, 'https://data.medicare.gov/resource/a8s4-5eya.json?$limit=50000&$$app_token=igGS35vW9GvDMmJUnmHju2MEH&$select=org_pac_id%20as%20source, org_pac_id%20as%20target,org_lgl_nm%20as%20description') .defer(d3.json, 'https://data.medicare.gov/resource/a8s4-5eya.json?$limit=50000&$$app_token=igGS35vW9GvDMmJUnmHju2MEH&$select=org_pac_id%20as%20source, org_pac_id||pri_spec%20as%20target, pri_spec%20as%20description') .defer(d3.json, 'https://data.medicare.gov/resource/a8s4-5eya.json?$limit=50000&$$app_token=igGS35vW9GvDMmJUnmHju2MEH&$select=org_pac_id||pri_spec%20as%20tsource, pri_spec%20as%20target, frst_nm%20as%20description') .await(go); function go(error, data,d2,d3){ data.concat(d2); data.concat(d3); console.log(data); res.render('index', { title: 'Group Practices', data }); } } module.exports = router; 但是，我得到一个浏览器错误， XMLHttpRequest is not […]

在node.js上的d3 grapth中删除一个节点

我的问题是一样的，请看这个小提琴 。 我删除了一个节点，并在d3图中添加了一个新节点，但是我仍然可以在图中看到已删除的节点。 “ios”被添加，但没有在“svg”中看到。 怎么了？ function dynamicAddNodes() { var updatedata = { "name":"ios", "NumOccurrences":"500", "color":"green", "x":0, "y":1 } data.nodes.pop(); data.nodes.push(updatedata); restart(); }

添加过滤，search和分页到实时stream表

我有一个表使用节点实时提供的数据进行更新。 该表使用d3.js呈现 我的问题是，我不知道如何使用d3.js添加过滤，search和分页function到表中。 我是一个begginer，并且无法理解哪里是放置代码的最佳位置。 我一直在考虑使用外部库来做这件事，但是如果我find一种方法来使用d3.js，它会更好，更干净。 这是我的代码： var table = d3.select('#data') table.append('thead') .append('tr') .selectAll('th') .data(['Title', 'Visits', 'Sales', 'Conversion(%)']) .enter() .append('th') .text(function (d) { return d }) table.append('tbody') function setupData(data) { var rows = d3.select('tbody') .selectAll('tr') .data(data, function(d) { return d.title }) var entertd = rows.enter() .append('tr') .selectAll('td') .data(function(d) { return d3.map(d).values() }) .enter() .append('td') entertd.append('div') entertd.append('span') […]

如何映射数据，以便我可以使用它来生成饼图？

我想知道如何映射2个数组的数据，以便我可以使用这些数据来生成使用d3.js的图表 目前我有2个arrays： wordsArray = {"THE","MAIN","PURPOSE","OF","PHOTOSYNTHESIS","IS","TO","MAKE", "FOOD","FOR","PLANT","IT","PRODUCE","SUGAR","MANUFACTURE"}; computationArray = {6,1,2,2,1,3,3,1,3,4,4,2,1,2,1}; 单词arrays包含所有不同的单词，并且计算arrays包含每个单词出现的次数。 我想知道是否有任何捷径使它看起来像这样： var data = [{"words":"THE", "count": "6"}, {"words":"MAIN", "count": "1"}, {"words":"PURPOSE", "count": "2"}, {"words":"OF", "count": "2"}…. ]; 谢谢！

从jsdom迁移到phantomJS？ （基本的DOM创build）

M. Bostock指出nodejs的jsdom对svg的支持不够，而且对我来说不支持getBBox() 。 另外，他build议切换到nodejs的PhantomJS。 我检查出来，但这种方法对我来说是新的。 我的nodejs + jsdom脚本创build了一个虚拟的DOM，我的d3js使用它，如下所示： var jsdom = require('jsdom'); jsdom.env( // creates virtual page "<html><body></body></html>", // create my DOM hook, [ 'http://d3js.org/d3.v3.min.js', // add my online dependencies … '../js/d3.v3.min.js', // … & local ones '../js/jquery-2.1.3.min.js'], function (err, window) { //my normal JS or nodejs code here ! } ); 如何将这个nodejs + jsdom迁移到nodejs […]

D3.js可视化与node.js

我刚刚开始学习node.js，我想学习如何使用节点创build一个D3.js视觉。 任何人都可以解释我怎么能做到这一点？ 理想情况下，我正在寻找一个尽可能简单的例子，以便通过代码阅读并理解如何执行此操作。 我已经看了一些长度，但我还没有find任何可重复的例子。

用于组织大型JavaScript应用程序的工具和最佳实践

我正在开发相当复杂的webapps /仪表板，主要是在Javascript中。 我喜欢在服务器上使用mongo和node，但是在客户端通常会有特定于应用程序的混乱的库和脚本。 我目前的项目包括bootstrap ， jquery ， jquery-ui ， D3 ， 传单 ， 交叉filter和一些晦涩的东西的组合，这是公平的说，尽pipe应用程序是真棒，代码已成为邪恶的混乱。 特别是D3和crossfilter的代码是相当详细的，例如参见官方crossfilter演示的源代码。 所以这个问题： 组织大型javascript应用程序的好工具和最佳实践是什么？ 我已经避免了全局variables，并尝试用闭包来组织命名空间，但是恐怕我需要一些比这更多的结构。 在服务器上有npm，这是相当不错的，但有什么类似的浏览器？ 我已经看了require.js ， backbone.js和coffeescript ，但是我不太确定这些是否真的能解决问题或者只是增加复杂性。