我使用以下代码在我的SVG元素中创建矩形:varrectangles=svg.selectAll("rect").data(dataset).enter().append("rect");rectangles.attr("x",function(d){returnxScale(getDate(d));//returnxScale(d.start);}).attr("y",function(d,i){return(i*33);}).attr("height",30).transition().duration(1000).attr("width",function(d){returnd.
我正在创建一个类似于MikeBostock's的图表可缩放面积图。对于我的特定项目，我有一组传感器，每30秒记录一次值(温度、光线、湿度和声音)。我有缩放实现工作，但是当我缩小到一年的比例时，图表的密度会减慢浏览器的速度并且图形也不会读取。如何编辑脚本，使折线图的密度相对于缩放量发生变化？换句话说，x域控制着值(value)线上的点数。当我放大到一个小时的时间范围时，我想要全密度(每30秒记录一次)，而当我缩小时，我想要低得多的密度(每天记录一次)。有任何想法吗？使用上面链接中的脚本实现会很有帮助。谢谢!svg{font-size:10px;}.axis{shape-rendering
我已经使用d3创建了一个饼图。它工作得很好，但是，当两个元素的数据值相等时，它显示相同的颜色。我该如何解决这个问题？functiongraph_pie_value(data,id,height,width){d3.select(id).selectAll("svg").remove();varradius=Math.min(width,height)/2;varcolor=d3.scale.category20c();varpie=d3.layout.pie().sort(null).value(function(d){returnd.value;});vararc=d3.svg.ar
在我的D3折线图中，我尝试创建一个鼠标悬停效果，如本例所示:http://bl.ocks.org/mbostock/3902569在这个例子中，作者使用了平分线函数，据我所知，它只支持线性比例。问题是，在我的图表中，我有一个带有不同离散rangePoint元组的序号x轴。因此，如果像下面的情况(m=鼠标位置)，我想获得最接近的x值的像素位置，在本例中为x2。m|x1----------x2----------x3有什么办法吗？ 最佳答案 使用您的链接示例，这里是用于序号比例的mousemove函数的快速实现:vartickPos=x
我正在使用D3库创建绘图应用程序。我需要在用户点击的坐标上绘制对象(为简单起见用圆圈)。问题是当用户使用平移和缩放并移动视口(viewport)时。然后对象被放置在错误的位置(我猜问题是事件坐标是相对于svg元素而不是g，所以它们是在没有适当转换的情况下计算的)。$('svg').on('click',function(event){d3.select('#content-layer').append('circle').attr('r',10).attr('cx',event.offsetX).attr('cy',event.offsetY).attr('stroke','black
我正在尝试将以下圆环图从d3.jsv3升级到d3.jsv4。http://bl.ocks.org/dbuezas/9306799我已经用新版本中的等效方法替换了所有旧版本的方法名称。d3.scale.ordinal()到d3.scaleOrdinal()d3.layout.pie()到d3.pie()d3.svg.arc()到d3.arc()未生成路径标记的“d”属性。并且方法“attrTween和styleTween”在v4中甚至没有被触发。我创建了一个plunker为了这。body{font-family:"HelveticaNeue",Helvetica,Arial,sans-s
我正在尝试使用d3.csv引用位于父文件夹中的文件，但找不到正确的语法。我的文件夹结构如下:root└──js├──data.csv└──myGraph.js在js文件夹中，我有myGraph.js。在这个文件中，我有以下代码:d3.csv("data.csv",function(error,data){data.forEach(function(d){d.date=parseDate(d.date);d.close=+d.close;});如果我将data.csv放在js文件夹中，一切正常。但是，如果我将data.csv文件移到根文件夹中root├──data.csv└──js└──
我不擅长前端开发，但最近玩了很多Javascript和D3。习惯于使用JupyterNotebooks在Python中进行科学分析，我认为应该可以使用类似的工作流程，在具有JS内核的Jupiternotebook中使用JS代码使用D3开发科学可视化。我看过n-riesco的IJavascriptproject看起来很有希望，但是当尝试导入D3时笔记本会抛出错误://npminstalld3vard3=require('d3');抛出ReferenceError:documentisnotdefined我猜这是因为Jupyter环境(becauseMikeBostocksaysso)中没
我使用SVG使用d3创建了zooming/panning图形。我正在尝试使用Canvas创建完全相同的图表。我的问题是，当涉及到Canvas图形的缩放和平移时，图形正在消失，我不知道为什么。我创建了两个JSBin来显示两者的代码。有人可以帮助我吗。SVG-JSBinCanvas-JSBin我的SVG缩放代码如下所示://ZoomComponentszoom=d3.zoom().scaleExtent([1,dayDiff*12]).translateExtent([[0,0],[width,height]]).extent([[0,0],[width,height]]).on("zoo
致尊敬的读者。我是javascript的新手，我遇到过这个问题。我正在尝试实现此力导向图的修改版本:http://mbostock.github.com/d3/ex/force.htmljson数据是从php脚本动态生成的。这个想法是用一种颜色为连接到一个特定节点(在php脚本中定义)的所有线着色，而所有其他线为灰色阴影。我试图通过将json文件中的源变量与php脚本中的变量匹配并在为真时更改颜色来做到这一点，如下所示:varlink=svg.selectAll("line.link").data(json.links).enter().append("line").attr("cla
