Tag: d3.js

D3.js动画与jQuery更新相结合: 好的，所以我使用了这里列出的大部分代码。记住动画，我想要做的是使用jQuery动态加载数据。但是，因为我把它包装在一个函数中，就像这样： function dataGrab(){ $.ajax({ type: “POST”, contentType: “application/json; charset=utf-8”, url: ‘somelink.php?param=someparam’, dataType: ‘text’, async: true, data: “”, success: function (data) { buildGraph(data); }, error: function (result) { alert(“error”); } }) }; 构建图表托管问题代码的副本，如下所示： function buildGraph(pureData) { var temp = pureData; var data = JSON.parse(temp); var width = 500, height = 500; var force = […]

d3.js仅加载部分数据/同步数据: 我有很多数据，我绘制成堆叠的条形图。我的Testdata大约是500k JSON-Objects（= 50k行，10个堆叠段）。我的问题是我不知道如何只加载部分数据。它在浏览器中显示，因此宽度约为1200到1920像素。我正在使用比例来计算线条大小。但是如果我为窗口宽度设置一个比数据大小更小的值，d3.js会计算每行的宽度为0，这意味着没有显示任何内容。因此，我必须设置50k的宽度来显示所有内容，但这有点不可行 – 它让浏览器崩溃，它只在我使用大约10k的数据然后设置宽度时工作10k px。第二件事是渲染需要很长时间（5秒）。 1.）我如何能够获取该数据并在宽度= 1920的窗口中显示它 – 如果我移动箭头键或概览图表 – 加载其他数据？ 2.）如何同步数据？例如：如果我有一个长滑块，这个滑块应该确定我感兴趣的数据。因此，范围从0到50k然后我滑动它在~4000。我想跳转到这个位置。 dataset = data; var stack = d3.layout.stack(); stack(dataset); var x= d3.scale.ordinal() .domain(d3.range(dataset[0].length)) .rangeRoundBands([0, w]); var y= d3.scale.linear() .domain([0, 1]) .range([0, h]); var svg = d3.select(“body”) .append(“svg”) .attr(“width”, w) .attr(“height”, h); var groups […]

在此d3.js可重复使用和可缩放的折线图中的两个数据集之间切换: 在这个例子http://bl.ocks.org/4743409中，我设置了一个包含两行的可缩放折线图。但是切换选择options我获得了两个数据集的叠加。我怎样才能在两者之间切换？提前感谢您的帮助，最重要的是感谢您改进代码的建议。更新：我成功实现了可重用的图表（我更新了链接中的示例）。现在我没有两个数据集的叠加。但是，我仍然不明白为什么正确的svg尺寸仅在更新时设置而不是在第一次创建时设置。

如何使用jQuery循环访问JSON文件: 我正在尝试循环通过以下JSON文件： { “statements”: [{ “subject”: “A” }, { “predicate”: “B” }, { “object”: “C” }, { “subject”: “D” }, { “predicate”: “E” }, { “object”: “F” }] } 如您所见，有两个主题，两个谓词和两个对象。例如，我想获得值”predicate”:”E” 。我怎么能使用jQuery或D3 Javascript库来做到这一点。我的下面的代码检索第一个主题”subject”:”A” 。 $.each(data.statements[0], function(i, v){ console.log(v.uriString); }); 或者在D3中（我不知道在D3中如何做到这一点）： d3.json(“folder/sample.json”, function(error, graph) { // Code is here for getting data from JSON file […]

如何在nvd3中排序栏？: 我在我的应用程序中使用nvd3多栏图表。它的工作正常。在这里，我需要根据值（我的意思是以升序/降序方式）对条形图进行排序。是否有任何内置函数可用于在nvd3中进行排序。或者我怎样才能实现排序。 nv.addGraph(function() { var chart; chart = nv.models.multiBarChart() .margin({bottom: 100}) .transitionDuration(300); chart.options( {delay: 1200}); chart.multibar .hideable(false); chart.xAxis //.axisLabel(“Modules”) .rotateLabels(45); chart.yAxis .tickFormat(function(d) { return d + “%”; }); d3.select(‘#’ + “barChart” + ‘ svg’) .datum(data) .call(chart); nv.utils.windowResize(chart.update); chart.dispatch.on(‘stateChange’, function(e) { nv.log(‘New State:’, JSON.stringify(e)); }); return chart; });

使用D3创建动态DIV列表: 我一直在用D3创建精美的动画图表，这些例子很棒。但是，我正在尝试做一些看似更基本的事情，并且遇到麻烦 – 将数据绑定到一个简单的DIV列表。我设置了enter()来初始化不透明度为0的元素，使用transition()将它们淡入淡出，然后exit()以淡化它们并将它们删除。 enter()和exit()似乎工作正常 – 但是，当更新包含列表中已有的元素时，它似乎被部分删除 – 包含DIV仍然存在，但内容消失。我无法理解为什么元素的内容会以这种方式改变。我的代码如下： var data = […]; sorted = data.sort(function(a, b) { return d3.descending(a.id, b.id); }); var tweet = tweetsBox .selectAll(‘div’) .data(sorted, function(d) { return d.id; }); var enterDiv = tweet.enter() .append(“div”) .attr(“class”, “tweetdiv”) .style(“opacity”, 0); enterDiv.append(“div”) .attr(“class”, “username”) .text(function(d) { return “@” + d.username }); […]

直接碰撞检测d3js: 我试图在我的svg强制布局（d3js）中创建碰撞检测。我已经按照本教程进行了圆形碰撞。由于某种原因，它不适用于rect形状。我试图在面纱中玩参数。这是我的代码： var node = svg.selectAll(“.node”) .data(json.nodes) .enter().append(“g”) .attr(“class”, “node”) .call(force.drag); node .append(“rect”) .attr(“class”, “tagHolder”) .attr(“width”, 60) .attr(“height”, 60) .attr(“rx”, 5) .attr(“ry”, 5) .attr(“x”, -10) .attr(“y”, -10); 还有这个： svg.selectAll(“.node”) .attr(“x”, function(d) { return dx; }) .attr(“y”, function(d) { return dy; }); link.attr(“x1”, function(d) { return d.source.x; }) .attr(“y1”, function(d) { return d.source.y; […]

D3中jQuery的$（“。cell：first”）相当于什么？: 我试过了 d3.select(“.cell:first”) d3.selectAll(“.cell”).filter(“:first”) d3.selectAll(“.cell”).select(“:first”) 但都没有工作

c3js数据标签的位置: 有没有办法在c3条形图中更改数据上方的标签位置？在官方文档中，很好地解释了如何通过操纵y和x整数来改变x和y测量轴上标签的位置，但我没有找到任何数据标签。我试图用简单的d3指向它，其中c3是基于但是console.log返回null： d3.selectAll(“.c3-texts .c3-text”).each(function () { var yOrigin = d3.select(this).attr(‘y’); console.log(yOrigin); }) 因为它在图形生成之前触发。您可以在这里查看和编辑我正在处理的内容： http ： //jsfiddle.net/e60o24d0/