我有.svg文件
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: graphname Pages: 1 -->
<svg width="708pt" height="305pt"
viewBox="0.00 0.00 707.95 305.00"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 301)">
<title>graphname</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-301 703.946,-301 703.946,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node"><title>0</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="456.946" cy="-192" rx="40.0939" ry="18" />
<text text-anchor="middle" x="456.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Mumbai</text>
</g>
<!-- 1 -->
<g id="node2" class="node"><title>1</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="399.946" cy="-18" rx="46.5926" ry="18"/>
<text text-anchor="middle" x="399.946" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Bangalore</text>
</g>
<!-- 0->1 -->
<g id="edge1" class="edge"><title>0->1</title>
<path fill="none" stroke="grey" d="M460.066,-163.558C462.067,-134.55 461.467,-88.3313 442.946,-54 438.559,-45.8673 431.415,-38.9123 424.2,-33.3953"/>
<polygon fill="grey" stroke="grey" points="456.557,-163.514 459.204,-173.773 463.532,-164.103 456.557,-163.514"/>
<text text-anchor="middle" x="509.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"> BLR-MUM-440 </text>
</g>
<!-- 6 -->
<g id="node7" class="node"><title>6</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="339.946" cy="-105" rx="27" ry="18"/>
<text text-anchor="middle" x="339.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Goa</text>
</g>
<!-- 0->6 -->
<g id="edge6" class="edge"><title>0->6</title>
<path fill="none" stroke="grey" d="M406.617,-188.92C382.78,-185.106 356.24,-176.165 340.946,-156 333.916,-146.73 333.971,-133.465 335.621,-122.928"/>
<polygon fill="grey" stroke="grey" points="406.251,-192.402 416.627,-190.258 407.179,-185.464 406.251,-192.402"/>
<text text-anchor="middle" x="391.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA-MUM-108 </text>
</g>
<!-- 2 -->
<g id="node3" class="node"><title>2</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-105" rx="37.0935" ry="18"/>
<text text-anchor="middle" x="118.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Cochin</text>
</g>
<!-- 3 -->
<g id="node4" class="node"><title>3</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-192" rx="32.4942" ry="18"/>
<text text-anchor="middle" x="118.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Jaipur</text>
</g>
<!-- 3->2 -->
<g id="edge8" class="edge"><title>3->2</title>
<path fill="none" stroke="grey" d="M118.946,-163.734C118.946,-150.419 118.946,-134.806 118.946,-123.175"/>
<polygon fill="grey" stroke="grey" points="115.446,-163.799 118.946,-173.799 122.446,-163.799 115.446,-163.799"/>
<text text-anchor="middle" x="162.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> COC-JAI-983 </text>
</g>
<!-- 3->6 -->
<g id="edge5" class="edge"><title>3->6</title>
<path fill="none" stroke="grey" d="M154.314,-176.995C170.385,-170.615 189.636,-162.951 206.946,-156 223.413,-149.388 227.386,-147.373 243.946,-141 268.615,-131.506 297.089,-121.207 316.581,-114.256"/>
<polygon fill="grey" stroke="grey" points="152.768,-173.843 144.763,-180.784 155.349,-180.35 152.768,-173.843"/>
<text text-anchor="middle" x="287.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA-JAI-884 </text>
</g>
<!-- 4 -->
<g id="node5" class="node"><title>4</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="40.9464" cy="-279" rx="40.8928" ry="18"/>
<text text-anchor="middle" x="40.9464" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Kolkatta</text>
</g>
<!-- 4->1 -->
<g id="edge3" class="edge"><title>4->1</title>
<path fill="none" stroke="grey" d="M29.5176,-251.287C19.1406,-222.958 7.48741,-177.368 21.9464,-141 34.1426,-110.324 44.1274,-103.101 72.9464,-87 163.431,-36.4467 286.981,-23.3374 353.307,-20.029"/>
<polygon fill="grey" stroke="grey" points="26.3613,-252.829 33.2323,-260.894 32.8903,-250.305 26.3613,-252.829"/>
<text text-anchor="middle" x="68.4464" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-KOL-228 </text>
</g>
<!-- 4->3 -->
<g id="edge7" class="edge"><title>4->3</title>
<path fill="none" stroke="grey" d="M62.7013,-254.293C76.1886,-239.595 93.1216,-221.142 104.866,-208.344"/>
<polygon fill="grey" stroke="grey" points="59.8,-252.278 55.6176,-262.012 64.9576,-257.011 59.8,-252.278"/>
<text text-anchor="middle" x="127.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> JAI-KOL-743 </text>
</g>
<!-- 5 -->
<g id="node6" class="node"><title>5</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="522.946" cy="-279" rx="29.4969" ry="18"/>
<text text-anchor="middle" x="522.946" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Delhi</text>
</g>
<!-- 5->0 -->
<g id="edge4" class="edge"><title>5->0</title>
<path fill="none" stroke="grey" d="M492.042,-261.717C484.599,-256.574 477.27,-250.295 471.946,-243 464.895,-233.337 461.127,-220.345 459.132,-210.027"/>
<polygon fill="grey" stroke="grey" points="490.4,-264.82 500.718,-267.226 494.152,-258.911 490.4,-264.82"/>
<text text-anchor="middle" x="520.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> MUM-DEL-340 </text>
</g>
<!-- 5->1 -->
<g id="edge9" class="edge"><title>5->1</title>
<path fill="none" stroke="grey" d="M553.607,-261.01C559.788,-256.059 565.453,-250.047 568.946,-243 587.287,-205.999 727.222,-322.519 562.946,-87 535.932,-48.2704 482.434,-31.5297 444.09,-24.3379"/>
<polygon fill="grey" stroke="grey" points="551.149,-258.463 545.015,-267.101 555.197,-264.173 551.149,-258.463"/>
<text text-anchor="middle" x="654.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-DEL-270 </text>
</g>
<!-- 6->1 -->
<g id="edge2" class="edge"><title>6->1</title>
<path fill="none" stroke="grey" d="M340.326,-76.4424C341.465,-68.7133 343.716,-60.6211 347.946,-54 353.629,-45.1046 362.471,-37.9253 371.263,-32.4387"/>
<polygon fill="grey" stroke="grey" points="336.824,-76.3034 339.381,-86.5849 343.794,-76.9527 336.824,-76.3034"/>
<text text-anchor="middle" x="395.446" y="-57.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-GOA-432 </text>
</g>
</g>
</svg>
我想
1）根据js
中的边数以特定顺序闪烁路径2）在js中为每个椭圆添加一个小圆圈 ......怎么做？
我试图通过d3来做到这一点...... 但是我无法访问svg文件中的路径
答案 0 :(得分：1)
要使路径首先逐个闪烁，您必须将所有路径的不透明度设置为0（这样您可以逐个增加它们），对它们进行排序，然后按顺序选择每个路径，这样就可以增加不透明度的备份到1。
首先，我选择了所有边缘容器，并将不透明度设置为0：
var edges = d3.selectAll('.edge');
edges.style('opacity', 0)
然后浏览每一个并填充一个数组。我使用你所在的索引填充了一个数组，边缘的数量（在下面的函数中计算出来）和id（我们可以选择）。
var indexAndEdge = [];
edges.each(function(d, i) {
var thisEdgeCount = this.id.substring(4)
indexAndEdge.push({ //push index you are at, the edge count worked out above and the id
index: i,
count: thisEdgeCount,
id: this.id
})
})
现在，是时候根据计数对此数组进行排序：
indexAndEdge.sort(function(a, b) {
return a.count - b.count;
});
现在让计时器逐一显示：
var count = 0; //set count to 0
function timer() {
setTimeout(function(d) {
if (count < indexAndEdge.length) { //if we havent gone through all edges
d3.select('#' + indexAndEdge[count].id).transition().duration(500).style('opacity', 1); //select current id from array
count++; //increment count
timer(); //call timer again
} else {
console.log('end') //end
}
}, 500)
}
timer(); //call timer to show paths one by one
现在已经完成了。把圆圈放在elipses上。首先选择所有椭圆，得到父椭圆（因为你不能将圆圈附加到椭圆），在椭圆的cx和cy附加一个圆圈：
var allEllipse = d3.selectAll('ellipse');
allEllipse.each(function(d) { //loop through ellipse's
var parentNodeX = this.attributes.cx.value,
parentNodeY = this.attributes.cy.value; //set cx and cy
d3.select(this.parentNode).append('circle')
.attr('cx', parentNodeX) //thisParentBBox.left + thisParentBBox.width/2)
.attr('cy', parentNodeY)
.attr('r', 10).style('fill', 'red')
})
你去吧。完成小提琴：https://jsfiddle.net/thatOneGuy/t5xah84d/2/
EDIT。
意识到你希望它们闪烁，只需更改定时器按钮的转换：
d3.select('#' + indexAndEdge[count].id).transition().duration(500).style('opacity', 0)
对此：
d3.select('#' + indexAndEdge[count].id).transition().duration(200).style('opacity', 0).transition().duration(200).style('opacity', 1);
然后删除开头的行，将所有不透明度设置为0。
如果你想让它继续下去，只需加上count = 0;在else语句中。更新了小提琴：https://jsfiddle.net/thatOneGuy/t5xah84d/5/
编辑2：
如果您只想让路径闪烁，只需在计时器功能中编辑选项：
d3.select('#' + indexAndEdge[count].id + ' path')
最后更新的小提琴：https://jsfiddle.net/thatOneGuy/t5xah84d/7/
如果您想更改颜色，请使用https://jsfiddle.net/thatOneGuy/t5xah84d/9/
，而不是不透明度
var edges = d3.selectAll('.edge');
edges.style('opacity', 1)
var indexAndEdge = [];
edges.each(function(d, i) {
var thisEdgeCount = this.id.substring(4)
indexAndEdge.push({ //push index you are at, the edge count worked out above and the id
index: i,
count: thisEdgeCount,
id: this.id
})
})
indexAndEdge.sort(function(a, b) {
return a.count - b.count;
});
var count = 0; //set count to 0
function timer() {
setTimeout(function(d) {
if (count < indexAndEdge.length) { //if we havent gone through all edges
d3.select('#' + indexAndEdge[count].id).transition().duration(200).style('opacity', 0).transition().duration(200).style('opacity', 1); //select current id from array
count++; //increment count
timer(); //call timer again
} else {
count =0 ;
timer()
console.log('end') //end
}
}, 500)
}
timer(); //call timer to show paths one by one
//add circle to each elipse
var allEllipse = d3.selectAll('ellipse');
allEllipse.each(function(d) { //loop through ellipse's
var parentNodeX = this.attributes.cx.value,
parentNodeY = this.attributes.cy.value; //set cx and cy
d3.select(this.parentNode).append('circle')
.attr('cx', parentNodeX) //thisParentBBox.left + thisParentBBox.width/2)
.attr('cy', parentNodeY)
.attr('r', 10).style('fill', 'red')
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: graphname Pages: 1 -->
<svg width="708pt" height="305pt" viewBox="0.00 0.00 707.95 305.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 301)">
<title>graphname</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-301 703.946,-301 703.946,4 -4,4" />
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="456.946" cy="-192" rx="40.0939" ry="18" />
<text text-anchor="middle" x="456.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Mumbai</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="399.946" cy="-18" rx="46.5926" ry="18" />
<text text-anchor="middle" x="399.946" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Bangalore</text>
</g>
<!-- 0->1 -->
<g id="edge1" class="edge">
<title>0->1</title>
<path fill="none" stroke="grey" d="M460.066,-163.558C462.067,-134.55 461.467,-88.3313 442.946,-54 438.559,-45.8673 431.415,-38.9123 424.2,-33.3953" />
<polygon fill="grey" stroke="grey" points="456.557,-163.514 459.204,-173.773 463.532,-164.103 456.557,-163.514" />
<text text-anchor="middle" x="509.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"> BLR-MUM-440 </text>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="339.946" cy="-105" rx="27" ry="18" />
<text text-anchor="middle" x="339.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Goa</text>
</g>
<!-- 0->6 -->
<g id="edge6" class="edge">
<title>0->6</title>
<path fill="none" stroke="grey" d="M406.617,-188.92C382.78,-185.106 356.24,-176.165 340.946,-156 333.916,-146.73 333.971,-133.465 335.621,-122.928" />
<polygon fill="grey" stroke="grey" points="406.251,-192.402 416.627,-190.258 407.179,-185.464 406.251,-192.402" />
<text text-anchor="middle" x="391.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA-MUM-108 </text>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-105" rx="37.0935" ry="18" />
<text text-anchor="middle" x="118.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Cochin</text>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-192" rx="32.4942" ry="18" />
<text text-anchor="middle" x="118.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Jaipur</text>
</g>
<!-- 3->2 -->
<g id="edge8" class="edge">
<title>3->2</title>
<path fill="none" stroke="grey" d="M118.946,-163.734C118.946,-150.419 118.946,-134.806 118.946,-123.175" />
<polygon fill="grey" stroke="grey" points="115.446,-163.799 118.946,-173.799 122.446,-163.799 115.446,-163.799" />
<text text-anchor="middle" x="162.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> COC-JAI-983 </text>
</g>
<!-- 3->6 -->
<g id="edge5" class="edge">
<title>3->6</title>
<path fill="none" stroke="grey" d="M154.314,-176.995C170.385,-170.615 189.636,-162.951 206.946,-156 223.413,-149.388 227.386,-147.373 243.946,-141 268.615,-131.506 297.089,-121.207 316.581,-114.256" />
<polygon fill="grey" stroke="grey" points="152.768,-173.843 144.763,-180.784 155.349,-180.35 152.768,-173.843" />
<text text-anchor="middle" x="287.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA-JAI-884 </text>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="40.9464" cy="-279" rx="40.8928" ry="18" />
<text text-anchor="middle" x="40.9464" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Kolkatta</text>
</g>
<!-- 4->1 -->
<g id="edge3" class="edge">
<title>4->1</title>
<path fill="none" stroke="grey" d="M29.5176,-251.287C19.1406,-222.958 7.48741,-177.368 21.9464,-141 34.1426,-110.324 44.1274,-103.101 72.9464,-87 163.431,-36.4467 286.981,-23.3374 353.307,-20.029" />
<polygon fill="grey" stroke="grey" points="26.3613,-252.829 33.2323,-260.894 32.8903,-250.305 26.3613,-252.829" />
<text text-anchor="middle" x="68.4464" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-KOL-228 </text>
</g>
<!-- 4->3 -->
<g id="edge7" class="edge">
<title>4->3</title>
<path fill="none" stroke="grey" d="M62.7013,-254.293C76.1886,-239.595 93.1216,-221.142 104.866,-208.344" />
<polygon fill="grey" stroke="grey" points="59.8,-252.278 55.6176,-262.012 64.9576,-257.011 59.8,-252.278" />
<text text-anchor="middle" x="127.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> JAI-KOL-743 </text>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="522.946" cy="-279" rx="29.4969" ry="18" />
<text text-anchor="middle" x="522.946" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Delhi</text>
</g>
<!-- 5->0 -->
<g id="edge4" class="edge">
<title>5->0</title>
<path fill="none" stroke="grey" d="M492.042,-261.717C484.599,-256.574 477.27,-250.295 471.946,-243 464.895,-233.337 461.127,-220.345 459.132,-210.027" />
<polygon fill="grey" stroke="grey" points="490.4,-264.82 500.718,-267.226 494.152,-258.911 490.4,-264.82" />
<text text-anchor="middle" x="520.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> MUM-DEL-340 </text>
</g>
<!-- 5->1 -->
<g id="edge9" class="edge">
<title>5->1</title>
<path fill="none" stroke="grey" d="M553.607,-261.01C559.788,-256.059 565.453,-250.047 568.946,-243 587.287,-205.999 727.222,-322.519 562.946,-87 535.932,-48.2704 482.434,-31.5297 444.09,-24.3379" />
<polygon fill="grey" stroke="grey" points="551.149,-258.463 545.015,-267.101 555.197,-264.173 551.149,-258.463" />
<text text-anchor="middle" x="654.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-DEL-270 </text>
</g>
<!-- 6->1 -->
<g id="edge2" class="edge">
<title>6->1</title>
<path fill="none" stroke="grey" d="M340.326,-76.4424C341.465,-68.7133 343.716,-60.6211 347.946,-54 353.629,-45.1046 362.471,-37.9253 371.263,-32.4387" />
<polygon fill="grey" stroke="grey" points="336.824,-76.3034 339.381,-86.5849 343.794,-76.9527 336.824,-76.3034" />
<text text-anchor="middle" x="395.446" y="-57.8" font-family="Times New Roman,serif" font-size="14.00"> BLR-GOA-432 </text>
</g>
</g>
</svg>