在我的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
我在使用D3时遇到了一些问题,我已经无计可施了。本质上,我有一个包含任意多行的时间序列图,为了方便起见,无法事先修改源数据(但可以在客户端进行操作)。数据被格式化(带有任意多个标签):object=[{"_id":"2012-08-01T05:00:00","value":{"label1":1.1208746110529344,"label2":0.00977592175310571}},{"_id":"2012-08-15T05:00:00","value":{"label1":0.7218920737863477,"label2":0.6250727456677252},....
我正在尝试为我创建的区域路径设置工具提示。我检查了传递给onmousemove事件处理程序的所有参数,我只是得到了完整的数据集0、0。据我所知,没有任何数据表明我在数据中的索引。“这个”上下文也是svg路径元素。还是没什么用。即使查看了d3.select(this),我也无法在任何地方找到索引。有什么方法可以确定我的鼠标在哪个数据点上吗?环顾四周,我发现了对d3.mouse(this)的引用,它为我提供了x/y坐标,但我如何将其映射回数据集中的数据点?我的目标是有一个工具提示来显示与集合中特定数据点相关的一些元数据。这里是一些请求的代码片段:vararea=d3.svg.area().
我是d3.js的新手,不确定要使用哪个d3功能。我需要围绕原点(在一个圆圈中)同心放置一组元素。svg.selectAll('circle').each(function(){d3.select(this).attr('cx',r*Math.cos(theta)).attr('cy',r*Math.sin(theta));theta+=thetaInc;});所以与其像上面的代码那样做一些乏味的事情,d3的简短方法是什么? 最佳答案 执行此操作的d3方法是传入数据并根据数据的索引计算位置,即类似于vartheta=2*Math.PI