Tag: d3.js

如何在d3多线图中使用json数据而不是tsv文件？

jsfiddle链接https://jsfiddle.net/8vhsLor6/ 基本上我想用json对象替换tsv文件数据。 我收到了错误。 输入错误 var cities = data.columns.slice(1).map(function(id) { 我有这样的数据 var data = [ {date:”1-May-12″,”New York”:”58.13″, “San Francisco”:”58.13″, “Austin”: “43”}, {date:”30-Apr-12″,”New York”:”53.98″ , “San Francisco”:”48.13″, “Austin”: “53”}, {date:”27-Apr-12″,”New York”:”67.00″, “San Francisco”:”38.13″, “Austin”: “63”}, {date:”26-Apr-12″,”New York”:”89.70″, “San Francisco”:”28.13″, “Austin”: “73”}, {date:”25-Apr-12″,”New York”:”99.00″, “San Francisco”:”18.13″, “Austin”: “83”} ];

在拖动时避免使用文本锚跳转SVG文本

这是一个带锚点的SVG文本： I love SVG 现在，如果我写一个拖动function： var dragMove = function (d,i) { //d3.select(this).attr(“text-anchor”, “null”); Does not work d3.select(this).attr(“x”, d3.event.x) .attr(“y”, d3.event.y); }; var dragEnd = function (d,i) { //d3.select(this).attr(“text-anchor”, “start”); Does not work }; var drag = d3.behavior.drag() .on(“drag”, dragMove) .on(“dragend”, dragEnd); d3.select(“svg”) .select(“text”) .call(drag); 根据其锚点位置拖动它后会跳转。 这个问题有方法解决吗？ 我尝试将anchor-text设置为null，然后再次重新设置它，但这不起作用。 我不希望拖动的用户体验完全改变。 甚至在拖动完成时也是如此。 任何的想法？ 这是JSFiddle： http ： //jsfiddle.net/sewVr/

椭圆弧箭头边缘d3强制布局

我正在使用强制布局来创建有向图。 它在canvas上呈现。 我的示例示例位于http://jsbin.com/vuyapibaqa/1/edit?html,output 现在我受到了启发 https://bl.ocks.org/mattkohl/146d301c0fc20d89d85880df537de7b0#index.html d3 svg中的资源很少，我试图在canvas中使用类似的东西。 http://jsfiddle.net/zhanghuancs/a2QpA/ http://bl.ocks.org/mbostock/1153292 https://bl.ocks.org/ramtob/3658a11845a89c4742d62d32afce3160 http://bl.ocks.org/thomasdobber/9b78824119136778052f64a967c070e0 使用d3在两个节点之间绘制多条边 。 想要用箭头添加椭圆弧连接边。 如何在canvas中实现这一点。 我的代码： Sample Graph Rendring Using Canvas var graph = {}//randomgraph.WattsStrogatz.beta(15, 4, 0.06); graph.nodes = [{“label”:”x”} , {“label”:”y”}]; graph.edges = [{source:0,target:1},{source:0,target:1}, {source:1,target:0}] var canvas = null var width = window.innerWidth, height = window.innerHeight; canvas = d3.select(“body”).append(“canvas”).attr(“width”,width).attr(“height”,height); var context = canvas.node().getContext(“2d”); force […]

如何使直方图中的标签响应动态用户输入

我有以下工作代码。 它接收输入数据并根据阈值显示直方图。 如果你运行下面的代码，代码正在工作，直到拖动滑动条时直方图发生变化。 然而，当我们将阈值从1.5拖动到2时，标签26 GENES不会改变。我期望值更改为30 GENES 。 这些值在var input_data中编码，尤其是nof_genes 。 我怎样才能让它生效？ “use strict”; var histograms, thresholds = []; var input_data = [{ “threshold”: 1.5, “histograms”: [{ “sample”: “Sample1”, “nof_genes”: 26, “values”: [{ “score”: 6.7530200000000002, “celltype”: “Bcells” }, { “score”: 11.432763461538459, “celltype”: “DendriticCells” }, { “score”: 25.823089615384621, “celltype”: “Macrophages” }, { “score”: 9.9911211538461551, “celltype”: “gdTCells” }, […]

在d3中创建动态垂直规则

我想创建一个垂直规则，如http://bost.ocks.org/mike/cubism/intro/demo-stocks.html中显示的那个，根据用户的鼠标动态更新其值。 这个演示使用cubism.js，但我想使用d3和/或jQuery来实现相同的效果。 有什么建议？ 编辑：我已经尝试根据此线程中的规则创建规则（ 如何在HTML中制作垂直线 ），但我不知道如何定位它并根据用户的鼠标位置移动它。

d3.js更新视觉

我有一个与d3.js放在一起的树形图。 我通过getJSON填充数据。 它很棒。 但是，我在setInterval方法中有这个function，它似乎并没有刷新自己。 var treemap = d3.layout.treemap() .padding(4) .size([w, h]) .value(function(d) { return d.size; }); var svg = d3.select(“#chart”).append(“svg”) .style(“position”, “relative”) .style(“width”, w + “px”) .style(“height”, h + “px”); function redraw3(json) { var cell = svg.data([json]).selectAll(“g”) .data(treemap) .enter().append(“g”) .attr(“class”, “cell”) .attr(“transform”, function(d) { return “translate(” + dx + “,” + dy + “)”; }); […]

D3.js滚动条形图

我有一个简单的条形图： var margin = {top: 20, right: 20, bottom: 30, left: 50}; var xLPU=d3.scale.ordinal(); var yLPU=d3.scale.linear(); var xLPUAxis = d3.svg.axis() .scale(xLPU) .orient(“bottom”); var yLPUAxis = d3.svg.axis() .scale(yLPU) .orient(“left”) .ticks(10, “чел.”); var LPUdivision=d3.select(“#LPUgraph”).append(“svg”) .attr(“width”, width + margin.left + margin.right) .attr(“height”, height + margin.top + margin.bottom) .append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”); […]

将D3 svg保存为高质量图像

有没有办法将D3 SVG图像保存为高质量图像？ 如果是，请解释……截至目前我正在使用以下代码将svg保存为图像，但我得到的图像质量不高 – var canvas1 = document.createElement(‘canvas’); canvas1.id = “canvas1”; canvas1.width = w+50; canvas1.height = h+50; document.getElementById(‘pngcon’).appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector(‘svg’)); var imgsrc = ‘data:image/svg+xml;base64,’+ btoa(html); var canvas = document.getElementById(“canvas1”); var context = canvas.getContext(“2d”); var canvasdata; var image = new Image; image.src = imgsrc; image.onload = function() { context.drawImage(image, 0, 0); canvasdata = […]

如何根据用户偏好处理通过d3.js呈现的过滤节点和边缘？

链接到我的代码（Plunker） 我正在开发D3.js强制布局的网络图，用于学术目的。 到目前为止，我编写了一个显示节点和边缘的图表。 我在jquery中有一个自动完成的文本框，用户可以在其中输入节点名称。 D3.js（仅代码的一部分。有关完整代码，请参阅我的plunker链接）： var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(100) .charge(-1546) .on(“tick”, tick) .start(); var svg = d3.select(“#schemio”) .append(‘svg’) .attr(“width”, width) .attr(“height”, height); var link = svg.selectAll(“.link”) .data(force.links()) .enter().append(“line”) .attr(“class”, “link”); var node = svg.selectAll(“.node”) .data(force.nodes()) .enter().append(“g”) .attr(“class”, “node”) .call(force.drag); HTML： Filter: Jquery（自动完成） $(function() { $( “#tags” ).autocomplete({ source: nodesArray }); […]

将popup / infotip / tooltip显示为hover特定文本

我有一张图表， http：//codepen.io/Siddharth11/pen/LVQmjN 当我将鼠标hover在上图中右侧写的颜色代码上时，我想显示一个弹出窗口。 我将为每个颜色代码显示seprete信息。那么我们如何为每个颜色代码创建一个单独的弹出窗口。 类似于莫里斯地图： http ： //codepen.io/andreic/pen/CJoze 或者： http ： //codepen.io/anon/pen/woJMrX 这个问题没有得到任何正确的答案。我尝试使用jquery插件（poshy提示）并试图解决问题。但是没有运气。我已经转发了问题并取得了进展。请参考链接了解当前的情况。 code： jquery插件将数据绑定到工具提示（poshy tip） ‘use strict’; var dataset1 = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; // let colors = [‘#8dd3c7’, ‘#ffffb3’, ‘#bebada’, ‘#fb8072’, ‘#80b1d3’, ‘#fdb462’, ‘#b3de69’, ‘#fccde5’, ‘#d9d9d9’, ‘#bc80bd’]; let colors = [‘#67001f’, ‘#b2182b’, ‘#d6604d’, ‘#f4a582’, ‘#fddbc7’, […]