我目前正在使用图形可视化,我使用SVG和D3库.我的设计师问我是否可以将图表边缘的箭头放在对应于线条长度的80%的位置上.通过使用getPointAtLength方法,我能够实现第一部分 - 获得位置.
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var path = svg.append("path")
.attr("d", "M20,20C400,20,20,400,400,400")
.attr("fill", "none")
.attr("stroke", "black");
var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var pathPoint = pathEl.getPointAtLength(pathLength*0.5);
var point = svg.append("svg:circle")
.style("fill", "red")
.attr("r", 5)
.attr("cx", pathPoint.x)
.attr("cy", pathPoint.y);
这是一个jsfidle示例
现在我想知道如何将箭头连接到相应方向的这个位置.更重要的是我如何才能这样做,这样我就可以在移动相关节点时更新图形的边缘.我还没有找到任何答案,"标记"的例子正在使用路径属性,如:style('marker-end',"url(#end-arrow)")
我正在尝试使用d3框架为包含HTML文本和背景矩形的组实现拖动行为.我能够让它工作,虽然没有设置drag.origin我可以看到由于鼠标位置/元素坐标偏移引起的显着跳跃.究竟是如何在d3 wiki页面 上描述的虽然页面描述了如何设置拖动的Origin,但是我没有正确理解如何在我的例子中实现它.我尝试了两种不同的方法:使用元素将元素组合在一起并定义新元素保持tose.在第一种情况下,我必须使用translate-function,我甚至不知道如何获得组的坐标.
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var group = svg.append("svg:g")
.attr("transform", "translate(10, 10)")
.attr("id", "group");
var rect1 = group.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);
var html1 = group.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");
var innerSvg …我正在使用D3 javascript库进行可视化.我想为可视化的一些元素创建工具提示,而我的客户希望它们看起来像'纸片/后贴'.最初我使用一些不错的CSS技巧为工具提示创建了简单的DIV来创建所需的外观.(受本教程启发)
我想使用工具提示封装到SVG foreignObject-element中,因此它更适合可视化,我可以轻松地操作它们.(例如缩放/平移)所以我的问题是:如何获得DIV的正确大小,它位于foreignObject-element中,所以我可以准确地设置foreignObject-element的大小？特别是当使用margin/padding/shadow ....
我通过使用.getBoundingClientRect()来解决它,但我不知道这是不是最好的方法.
这是一个代码示例:
var body = d3.select("body");
var svg = body.append("svg");
var tooltipContainer = svg.append("svg:g");
var html = tooltipContainer.append("foreignObject")
var div = html.append("xhtml:div")
.attr('class', 'paper-tooltip')
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec …我正在寻找暂时禁用d3库提供的缩放功能的可能性.我尝试在停用缩放时保存洞穴当前缩放/平移值,并在再次激活缩放时设置缩放/平移值.不幸的是,这不起作用.
这是我创建的代码示例:
var savedTranslation = null;
var savedScale = null;
var body = d3.select("body");
var svg = body.append("svg");
var svgContainer = svg.append("svg:g");
var circle = svgContainer.append("svg:circle")
.attr('cx', 100)
.attr('cy', 100)
.attr('r',30)
.attr('fill', 'red');
circle.on('click', clickFn);
function clickFn(){
if (circle.attr('fill') === 'red'){
circle.attr('fill','blue')
}
else if (circle.attr('fill') === 'blue'){
circle.attr('fill','red')
}
};
svg.call(zoom = d3.behavior.zoom().on('zoom', redrawOnZoom)).on('dblclick.zoom', null);
function redrawOnZoom(){
if (circle.attr('fill') === 'red'){
if (savedScale !== null){
zoom.scale(savedScale)
savedScale = null
}
if (savedTranslation !== null){
zoom.translate(savedTranslation)
savedTranslation = null
} …我正在为SVG-G元素(SVG组对象)分配人工属性.我使用SVG转换的内容移动组,并将组的x/y坐标及其宽度/高度存储在这些属性中.
我正在使用D3 Javascript库和调用:
embeddedElemContainer = nodeBoxContainer.append('svg:g')
.attr('x', x)
.attr('y', y)
.attr('width', width)
.attr('height', height)
结果如下:
<g transform="translate(13.585786437626904,31.585786437626904)" x="13.585786437626904" y="31.585786437626904" width="43.00000000000001" height="0"></g>
这是好的,唯一困扰我的事实是,属性值存储为字符串.如果我想用它们进行一些计算,我不得不施展.
parseInt(@embeddedElemContainer.attr('x'))
有没有办法将这些值直接存储为整数/双？
我有几个组(SVG G元素)嵌套在另一个组中,我想得到他们的ID.我使用D3 javascript库来创建SVG,代码看起来与此类似.
var body = d3.select("body");
var svg = body.append("svg")
.attr("width", '100%')
.attr("height", '100%')
var outerG = svg.append("g")
.attr('id','outerG')
var innerG1 = outerG.append('g')
.attr('id','innerG1')
var innerG2 = outerG.append('g')
.attr('id','innerG2')
我试图使用childNodes属性,但是console.log(outerG [0] .childNodes)给了我undefined.找不到正确的答案用谷歌搜索,可以请有人给我一个提示如何做到这一点？
我想画一条线,在SVG中连接两个圆圈.圆圈与 - 封装在SVG组元素()中的底层矩形一起.这些组使用transform ="translate(x,y)"属性定位.我的问题是,组内元素的坐标相对于其组的原点(0,0坐标)定位.要放置一条上线,我需要知道绝对坐标.
这是使用D3 javascript库的代码:
var body = d3.select("body");
var svg = body.append("svg");
var group1 = svg.append("g")
.attr("transform", "translate(50,50)");
var rect1 = group1.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'lightblue');
var circ1 = group1.append("svg:circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 10)
.style("fill", 'red')
var group2 = svg.append("g")
.attr("transform", "translate(350,50)");
var rect2 = group2.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'lightgreen');
var circ2 = group2.append("svg:circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 10)
.style("fill", 'red'); …我正在尝试使用 python 和 GTK3 创建一个简单的文件浏览器。受到另一个问题的启发，我能够制作一个小的工作示例
#!/usr/bin/python
import os
from gi.repository import Gtk
window = Gtk.Window()
window.connect("delete-event", Gtk.main_quit)
filesystemTreeStore = Gtk.TreeStore(str)
parents = {}
for (path, dirs, files) in os.walk("/home"):
for subdir in dirs:
parents[os.path.join(path, subdir)] = filesystemTreeStore.append(parents.get(path, None), [subdir])
for item in files:
filesystemTreeStore.append(parents.get(path, None), [item])
filesystemTreeView = Gtk.TreeView(filesystemTreeStore)
renderer = Gtk.CellRendererText()
filesystemColumn = Gtk.TreeViewColumn("Title", renderer, text=0)
filesystemTreeView.append_column(filesystemColumn)
window.add(filesystemTreeView)
window.show_all()
Gtk.main()
代码有效，但结果感觉效果不大。我能够读取和显示整个 linux 文件系统，但是花了很长时间。原因之一可能是 os.walk 的使用。
另一件事是，这样的代码不允许打开空目录。
出于这个原因，我只想显示列出的父目录的内容，并随着用户探索树结构逐渐展开树。
我还无法使用 Python 和 GTK3 找到解决方案。有一个类似的解决方案，但对于 Tkinter
我正在尝试使用Rahpael库在javascript中创建一些带有文本的按钮.我想知道样式文本的大小,在绘图之前避免这样,这样我就可以创建适当的背景(按钮).另外,我想避免在画布/纸张之外绘制文本(文本的位置是其中心的位置).
我可以使用Raphaels getBBox()方法,但我必须首先创建(绘制)文本来执行此操作.所以我绘制文本以获得大小,以便能够在正确的位置绘制它.这很难看.所以我正在寻找一些通用的方法来估计给定字体,字体大小,家庭的样式文本的度量...
可以使用HTML5画布http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/来完成此操作,但Raphael不使用画布.是否有可能使用Raphael或普通Javascript获取文本指标？
我正在玩Raphael SVG库,我定义了一个持有Raphael画布的元素
<div id="canvas_container"></div>
我把拉斐尔帆布/纸放在里面:
paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%');
现在我想获得画布的绝对宽度/高度.我想出了如何使用paper.canvas访问画布,但如果我尝试获取paper.canvas.width,我得到一个SVGAnimatedLength元素而不是宽度.
我注意到当使用Chrome开发工具并使用鼠标在控制台中选择paper.canvas时,所选元素在窗口中显示正确的绝对大小(当Chrome开发人员选择某个元素时,页面中出现蓝色选项安慰).但是如何在代码中获取它？