d3js Son daire köprüsünü oluşturma

Tamam ... Zumlanabilir Daire Paketini http://bl.ocks.org/mbostock/7607535 kullanarak kullanıyorum. Flare.json dosyasını açtım ve bununla uğraşmaya başladım ve başarılı bir şekilde işlemeyi başarabiliyordum. Bu şuna benzer:d3js Son daire köprüsünü oluşturma

flare.json

{ 
    "name": "flare", 
"children": [ 
{ 
"name": "Kommunikation und Umwelt", 
"children": [ 

{ 
"name": "Courses", 
"children": [ 
    { 
    "name": "AO-Psy.", 
    "children": [ 
    {"name": "Prof. A", "size": 5731,"url":"google.com"}, 
    {"name": "Prof. B", "size": 5731}, 
    {"name": "Prof. C", "size": 5731} 
    ] 
    }, 
    { 
    "name": "E&E", 
    "children": [ 
    {"name": "Prof. D", "size": 5731}, 
    {"name": "Prof. E", "size": 5731}, 
    {"name": "Prof. F", "size": 5731}, 
    {"name": "Prof. G", "size": 5731}, 
    {"name": "Prof. H", "size": 5731} 
    ] 
    }, 
    { 
    "name": "IBSS", 
    "children": [ 
    {"name": "Prof. I", "size": 5731}, 
    {"name": "Prof. J", "size": 5731}, 
    {"name": "Prof. K", "size": 5731} 
    ] 
    }, 
    {"name": "", "size": 0}, 
    { 
    "name": "E-Gov", 
    "children": [ 
    {"name": "Prof. L", "size": 5731}, 
    {"name": "Prof. M", "size": 5731}, 
    {"name": "Prof. N", "size": 5731} 
    ] 
    }, 
    { 
    "name": "Muki", 
    "children": [ 
    {"name": "Prof. O", "size": 5731}, 
    {"name": "Prof. P", "size": 5731}, 
    {"name": "Prof. Q", "size": 5731}, 
    {"name": "Prof. V", "size": 5731} 
    ] 
    }, 
    {"name": "Schedule", "size": 5731}, 
    {"name": "News", "size": 5731}, 
    {"name": "Events", "size": 5731}, 
    {"name": "Search", "size": 5731}, 
    {"name": "", "size": 0} 
] 
}, 
{"name": "", "size": 0} 
]

Şimdi ne yapmak istiyorum, köprüler eklemek denemektir. Örneğin, "ProfA" seçeneğini tıklayıp, reklamı yapacağım başka bir html sayfasına gitmek istiyorum. Bunu yapacak flare.json için yapabileceğim bir değişiklik var mı?

zaten bazı mesaj Post2 Post3
Post1 bulundu ama hiçbir şey sadece tekrar

burada

tam html dosyası, flare.json zaten burada yayınlanan edilir (kısa kısım)
zoom.html uzaklaştırmak çalışıyor:

kurulumunuzda

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 
<meta charset="utf-8"> 
<style> 

.node { 
cursor: pointer; 
} 

.node:hover { 
stroke: #000; 
stroke-width: 1.5px; 
} 

.node--leaf { 
fill: #14DCD2; 
} 

.label { 
font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif; 
text-anchor: middle; 
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; 
} 

.label, 
.node--root, 
.node--leaf { 
pointer-events: none; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 


var margin = 600, 
diameter = 1920; 

var color = d3.scale.linear() 
.domain([-1, 5]) 
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) 
.interpolate(d3.interpolateHcl); 

var pack = d3.layout.pack() 
.padding(2) 
.size([diameter - margin, diameter - margin]) 
.value(function(d) { return d.size; }) 

var svg = d3.select("body").append("svg") 
.attr("width", diameter) 
.attr("height", diameter) 
.append("g") 
.attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

d3.json("flare.json", function(error, root) { 
if (error) return console.error(error); 

var focus = root, 
    nodes = pack.nodes(root), 
    view; 

var circle = svg.selectAll("circle") 
    .data(nodes) 
.enter().append("circle") 
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
    .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
    .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }) 



    var text = svg.selectAll("text") 
    .data(nodes) 
.enter().append("text") 
    .attr("class", "label") 
    .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) 
    .style("display", function(d) { return d.parent === root ? null : "none"; }) 
    .text(function(d) { return d.name; }) 
    //.on('click', function(d, i) {window.location.href = d.url;}); 

    var node = svg.selectAll("circle,text") 

    node.each(function(d){ 
    var thisNode = d3.select(this); 
    if (!d.children) { 
    thisNode.append("a") 
     .attr("xlink:href", function(d) { return d.url; }) 
     .append("text") 
      .attr("dx", 8) 
      .attr("dy", 3) 
      .attr("text-anchor", "start") 
      .text(function(d) { return d.name; }) 
      ; 
    } else { 
    thisNode.append("text") 
     .attr("dx", -8) 
     .attr("dy", 3) 
     .attr("text-anchor", "end") 
     .text(function(d) { return d.name; });  
    } 

    }); 




    d3.select("body") 
    .style("background", color(-1)) 
    .on("dblclick", function() { zoom(root); }); 

    zoomTo([root.x, root.y, root.r * 2 + margin]); 

    function zoom(d) { 
    var focus0 = focus; focus = d; 
    //.attr("xlink:href", url); 
    //.on('click', function(d, i) {window.location.href = d.url;}); 

    var transition = d3.transition() 
    .duration(d3.event.altKey ? 7500 : 750) 
    .tween("zoom", function(d) { 
     var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 4 + margin]); 
     return function(t) { zoomTo(i(t)); }; 
    }); 

    transition.selectAll("text") 
    .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) 
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) 
    .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) 
    .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); 

    } 

    function zoomTo(v) { 
    var k = diameter/v[2]; view = v; 
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); 
    circle.attr("r", function(d) { return d.r * k; }); 

    } 

    }); 

    d3.select(self.frameElement).style("height", diameter + "px"); 

    </script> 
    </html>

kaynak

2014-12-16 Sebastian Kawa

sorun çoğunlukla böyle yaprakları (en küçük daireler) gibi bazı elementleri için pointer-events: none sahip olmasından kaynaklanmaktadır.

Bunu düzeltir ve click olayını, yapraklar için bir yakınlaştırma olayını tetiklemek yerine URL'ye yönlendirecek şekilde tanımlarsanız, istenen davranışı alırsınız.

senin için bir araya küçük bir keman koymak, buraya bakın: http://jsfiddle.net/chroth/fkxcvtu9/3/

fikrin çekirdek (click fonksiyonu) burada geçerli:

function clickFct(d,i) { 
if (d3.select(this).classed("node--leaf")) { 
    alert(d.url); //open URL here 
} else { 
    if (focus !== d) 
    { 
     zoom(d); 
     d3.event.stopPropagation(); 
    } 
} 
}

ve stil bu değişimde:

.node--root, 
.node--leaf { 
    pointer-events: all; 
}

Todos

Gördüğünüz gibi, şu anda sadece alert numaralı telefonu çekiyorum. Ayrıca, yakınlaştırılmış vb. Değilken belirli tıklama etkinliklerini devre dışı bırakmak isteyebilirsiniz. Artı renkler üzerinde çalışır.

Ayrıca, vb

etiket görünürlüğünü düzeltmek gerekir unutmayın Ama sana :)

Hope yardımcı olur bırakıyorum.

kaynak

2014-12-16 21:45:31

onun çalışma omg çok mutluyum şimdi beni kurtardı adam çok teşekkür ederim –

hoş geldiniz! lütfen cevabımın sadece başlangıç olduğunu unutmayın - todos'u görün! iyi şanslar! –

Evet, üzerinde çalışmaya devam edeceğim. Herhangi bir ilerleme kaydetmediğimde daha fazla soru sormak sorun olur mu? –

Teşekkürler Pinguin. Benim için doğru çalışıyor, ancak i parametresinin amacından emin değilim. Burada, tanımlanmamış olan urllere karşı koruma sağlayan küçük bir değişiklik var.

function onClickLeaf(d) 
{ 
    if (d3.select(this).classed("node--leaf")) 
    { 
     if(d.url !== undefined) 
     { 
      alert(d.url); //open URL here 
     } 
    } 
    else 
    { 
     if (focus !== d) 
     { 
      zoom(d); 
      d3.event.stopPropagation(); 
     } 
    } 
}

benden oyu Yukarı nedeniyle bu kod belirli bir satıra

ve basitlik için bir fonksiyonu haline sarmak için yeterince iyi davranarak.

if (d3.select(this).classed("node--leaf"))

kaynak

2015-02-03 08:14:23

d3js Son daire köprüsünü oluşturma

cevap

İlgili konular