我正在用d3编写一个项目,其中有一个包含两个外部javascript文件的html页面,例如script_1.js和script_2.js。我需要从script_1.js注册一个事件监听器,从script_2.js注册另一个事件监听器以用于选择元素上的更改事件。目前我的html中有这一行:其中selectIndexSp(object)和selectIndexBt(object)分别定义在script_1.js和script_2.js中。我根本不喜欢这种方法,我想知道如何在d3中而不是在html文件中执行相同的任务,我知道这不是一个好的做法。提前致谢! 最佳答
我用d3.js制作了一个折线图(见附图1)。我设法在鼠标悬停时在图形点上插入工具提示。我也想改变点的颜色和大小。我尝试了很多方法,但似乎真的很难。有什么帮助吗?这是一段代码:svg.selectAll("dot").data(data).enter().append("circle").attr("r",5.5).style("fill","#fff8ee").style("opacity",.8)//settheelementopacity.style("stroke","#f93")//setthelinecolour.style("stroke-width",3.5).attr(
我发现的所有d3教程都使用排列在对象数组中的数据,他们从中为数组中的每个对象绘制一个点。给定以下结构的数据:data=[{id:1,x:4,y:10,type:1},{id:2,x:5,y:20,type:2}...]x和y值用于制作散点图。类型参数用于改变每个点的颜色。有关示例,请参见此jsfiddle:http://jsfiddle.net/uxbHv/不幸的是,我有一个不同的数据结构,我不知道如何通过为每个对象绘制两个数据点来创建相同的图形。以下是一些示例数据:dataSet=[{xVar:5,yVar1:90,yVar2:22},{xVar:25,yVar1:30,yVar2:
我想在我创建的矩形内写入文本,如下所示:body=d3.select('body')svg=body.append('svg').attr('height',600).attr('width',200)rect=svg.append('rect').transition().duration(500).attr('width',150).attr('height',100).attr('x',40).attr('y',100).style('fill','white').attr('stroke','black')text=svg.append('text').text('Thisis
当我尝试使用D3.js库正确执行旋转动画时遇到问题。问题与我想要旋转元素的点有关。这是我制作的fiddle来展示我的意思(慢动作):http://jsfiddle.net/74mCb/问题的根源似乎在这里:.attr("transform","rotate(-60,150,130)");然后我像这样旋转它:.attr("transform","rotate(40150,130)");我希望针头保持在原位(成为旋转中心),有人可以解释一下我做错了什么吗?谢谢! 最佳答案 这有点难以掌握(我自己并不完全理解)但是D3需要一些帮助来了解如
这是jsfiddle的链接http://jsfiddle.net/jaimem/RPGPL/2/现在图形中所有的圆圈都显示为红色。是否有一种方法可以在圆圈上显示随机颜色。这是d3.js代码vardata=[{"count":"202","year":"1590"},{"count":"215","year":"1592"},{"count":"179","year":"1593"},{"count":"199","year":"1594"},{"count":"134","year":"1595"},{"count":"176","year":"1596"},{"count":"172
我一直在做一个元素,我注意到我想要解决的Bootstrap行为中的一些不一致。当弹出窗口(或工具提示,无论什么,它们基本相同)接近屏幕边缘时-如果它是右侧的,当接近边缘时-它会收缩以免离开屏幕(它只能在一定程度上起作用,但这通常就足够了。当展示位置在左侧时不会发生这种情况。即:正确的位置:正常宽度:靠近边缘:左侧位置:正常宽度:靠近边缘:这些图片来自小DEMO我写信来说明这个问题。我把源代码搞得一团糟,至今无济于事。我似乎无法弄清楚到底是什么导致了这种行为。有什么想法吗?附注我正在使用Bootstrap3.1.1。新的3.2没有解决这个问题(我想避免在此时升级)。重大更新!经过一些挖掘
我之前问过一个关于d3的问题,他们建议我使用序数尺度,这会解决我的问题。它确实解决了我的问题,但我知道我遇到了另一个问题......它画得很好,但我的X轴上全是文字。例如,我想要:1900190419081912...但我得到了:190119021903190419051906。如您所见,这还不清楚。(这只是一个例子,如果只有日期我可以使用另一个尺度)。我看到的每个地方都在谈论axis.ticks(number)。但这不起作用。没有任何反应,我仍然得到相同的结果。我破解了一个结果以在x轴上获得更少的结果:varstr=[];vari=0;while(i但如果我这样做,它会创建一条随机线
我使用dagre绘制有向图,但我想了解svg、d3、dagre和graphlib如何相互依赖?基本上,一个停止,另一个开始。我将尝试指出我在有限的理解下可以收集到的内容。svg:(是一种基于XML的矢量图像格式,但基本上它)是一个html标签,您可以使用它绘制圆形、椭圆形、矩形等,然后使用g元素对两个或多个形状进行分组并应用转换等。d3:d3是一个javascript库,它基本上允许您将数据与svg结合起来。因此,您不必每次都编写svg标签,您基本上可以使用编程、循环、数据等来创建svg代码。现在谈到dagre,dagre-d3和graphlib是我遇到的问题假设我上面说的一切都有意义
我需要在同一个页面上有多个版本的javascript库。如果不手动重构一个版本以避免命名冲突,我该如何实现这一目标?关于如何使用Jquery执行此操作的示例很多(example)。然而,这似乎依赖于jQuery的优点。我如何为任意脚本执行此操作?更多细节:我正在使用d3.js,我正在插入其他人使用d3制作的可视化效果。问题是,其中一个可视化项需要一个版本的d3,另一个需要更新的版本。这两个可视化应该在同一页面上可用-用户通过单击缩略图交换显示哪个可视化,然后使用js隐藏一个可视化并构建另一个可视化。因此,似乎交换脚本而不是以无冲突的方式加载两者也是一种选择。