草庐IT

d3_graph_chart

全部标签

javascript - D3 顺序尺度和线性尺度之间的区别

varxScale=d3.scale.ordinal().domain([0,d3.max(data)]).rangeRoundBands([0,w],.1);varyScale=d3.scale.linear().domain([0,data.length]).range([h,0]);我对何时在D3中使用序数或线性尺度感到困惑。以下是我从API文档中发现的内容,仍然有点迷失......如果有人可以提供帮助,我们将不胜感激。序数(x)给定输入域中的值x,返回输出域中的对应值。如果范围是明确指定的(如范围,但不是rangeBands、rangeRoundBands或rangePoint

javascript - 为什么 d3.js v3 在实现缩放时会破坏我的力图而 v2 没有?

我有一个使用d3.js创建的强制布局我希望同时拥有可拖动力布局的正常功能以及缩放功能。我基本上复制/粘贴了(http://jsfiddle.net/nrabinowitz/QMKm3/)中的缩放代码。这与MikeBostock在(http://bl.ocks.org/mbostock/3680957)中使用的缩放方式相同。这是我的代码:http://jsfiddle.net/kM4Hs/6/缩放效果很好,但我无法在强制布局中选择单个节点并将它们四处拖动。我发现罪魁祸首是两位作者都使用d3.v2.js而不是更新的d3.v3.js。当我将导入更改为v2时,它运行良好。但是,如果可能的话,我

javascript - 销毁 chart.js 条形图以在同一 <canvas> 中重绘其他图形

我正在使用Chart.js库绘制一个条形图,它工作正常,但现在我想破坏条形图并在同一个canvas中制作一个折线图。我试过这两种方法来清除Canvas:vargrapharea=document.getElementById("barChart").getContext("2d");grapharea.destroy();varmyNewChart=newChart(grapharea,{type:'radar',data:barData,options:barOptions});第二种方式:vargrapharea=document.getElementById("barChart"

javascript - 如何为我的 d3 图表标题设置文本颜色?

我有我的d3图表标题,文本附加在svg上,如下所示:svg.append("text").attr("x",(width/2)).attr("y",0).attr("text-anchor","middle").style("font-size","14px").text(text);引用here但我想将文本颜色设置为其他颜色。这可能吗? 最佳答案 我一直在做.style("fill","darkOrange")然后我发现正确答案是.style('fill','darkOrange')

javascript - Chart.js 2.0 donut 工具提示百分比

我使用过chart.js1.0,我的圆环图工具提示显示基于数据除以数据集的百分比,但我无法用图表2.0复制它。我到处搜索,但没有找到可行的解决方案。我知道它会在选项下进行,但我尝试过的一切充其量只是使馅饼功能失调。DoughnutChartcanvas{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}varrandomScalingFactor=function(){returnMath.round(Math.random()*100);};varrandomColorFactor=functio

javascript - 如何使用 D3.js 将图像添加到 svg 容器

我创建了一个示例Asp.NetMVC4应用程序,我在其中使用D3.js附加了一个SVG元素,然后在SVG中附加了一个文本元素(参见下面的代码)。在我尝试使用本地png文件将img附加到SVG之前,这一切都很好。img被附加到DOM,但img没有呈现在页面上。知道我在这里做错了什么,以及如何解决它吗?@{ViewBag.Title="HomePage";}varsvg=d3.select("body").append("svg").attr("width",200).attr("height",100).style("border","1pxsolidblack");vartext=sv

javascript - 使用 d3.js 时可以在文本中插入换行符吗?

这个问题在这里已经有了答案:Howtolinebreakansvgtextwithinjavascript?(6个答案)关闭4年前。我正在寻找一种使用d3.js在工具提示文本元素中使用换行符的方法。.text("test"+""+"test")上述以及其他类似的努力似乎都没有奏效。这里有一个线程似乎可以回答它:https://groups.google.com/forum/?fromgroups=#!topic/d3-js/GgFTf24ltjc但解决方案不是很清楚。在上述情况下如何使用.html?.text(.html("测试"+""+"测试"))没用?谢谢

javascript - D3js 从数组而不是文件中获取数据

我找到了这个优秀的d3js图表here.但是,就我而言,我希望此图表从数组而不是tsv文件中获取值。我想让它从表[]中获取值。我该怎么做?因为它为此使用了一个函数,我不知道我应该把我的数组放在哪里。Usingd3-tiptoaddtooltipstoad3barchart.body{font:10pxsans-serif;}.axispath,.axisline{fill:none;stroke:#000;shape-rendering:crispEdges;}.bar{fill:orange;}.bar:hover{fill:orangered;}.x.axispath{displa

javascript - 如何在 Chart.js v2 中使用两个 Y 轴?

我正在尝试使用Chart.js创建一个包含两个数据集的折线图,每个数据集都有自己的Y刻度/轴(一个在图表的左侧,一个在图表的右侧)。这是我的代码(jsfiddle):varcanvas=document.getElementById('chart');newChart(canvas,{type:'line',data:{labels:['1','2','3','4','5'],datasets:[{label:'A',yAxesGroup:'A',data:[100,96,84,76,69]},{label:'B',yAxesGroup:'B',data:[1,1,1,1,0]}]},

javascript - D3 : What is a Bisector?

我正在研究使用D3制作图表,并偶然发现了d3.bisector.但是,我不明白它是什么或从文档中做什么。我在网上找到的几乎所有示例都使用日期数组,类似于官方文档中的示例:vardata=[{date:newDate(2011,1,1),value:0.5},{date:newDate(2011,2,1),value:0.6},{date:newDate(2011,3,1),value:0.7},{date:newDate(2011,4,1),value:0.8}];varbisect=d3.bisector(function(d){returnd.date;}).right;那么除了从