Mostrar Mensajes

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Como usar mouseover d3 javascript y json

« en: 02 de Diciembre 2013, 17:10 »

Hola foro!!
Estoy tratando de hacer un ejercicio en javascript usando d3.js y mouseover, pero no me sale

Intento reproducir este ejemplo http://bost.ocks.org/mike/uberdata/
pero no se como animarlo con el mouseover, por ejemplo que cuando pase el mouse en un nodo solo muestre ese nodo seleccionado y sus conecciones.

// ************************************************** ****
Mi codigo html es:

Código: [Seleccionar]

<!DOCTYPE html>
<meta charset="utf-8">
<style>

#circle circle {
fill: none;
pointer-events: all;
}
body {
font: 10px sans-serif;
}

.group path {
fill-opacity: .5;
}

path.chord {
fill-opacity: .67;
stroke: #000;
stroke-width: 1.25px;
}

#circle:hover path.fade {
display: none;
}

</style>

<h1>Sistemas</h1>
<aside>.Muestra diferentes sistemas relacionados.
<p>Prueba.

<body>
<script src="d3.v3.min.js"></script>
<script>

var outerRadius = 1000 / 2,//tamaño total
innerRadius = outerRadius - 130;//tamaño del circulo dibujado

var fill = d3.scale.category20c();

var chord = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);

var arc = d3.svg.arc()
.innerRadius(innerRadius)//radio exterior del dibujo
.outerRadius(innerRadius + 20);//radio interior del dibujo

var path = d3.svg.chord()
.radius(innerRadius);

var svg = d3.select("body").append("svg")
.attr("width", outerRadius * 2)
.attr("height", outerRadius * 2)
.append("g")
.attr("id","circulo")//nombre del objeto
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

svg.append("circulo")
.attr("r",outerRadius);//no se que hace

d3.json("test.json", function(error, imports) {

var indexByName = d3.map(),
nameByIndex = d3.map(),
matrix = [],
n = 0;

// Returns the Flare package name for the given class name.
function name(name) {
return name.substring(0, name.lastIndexOf(".")).substring(6);
}

// Compute a unique index for each package name.
imports.forEach(function(d) {
if (!indexByName.has(d = name(d.name))) {
nameByIndex.set(n, d);
indexByName.set(d, n++);
}
}
);

// Construct a square matrix counting package imports.
imports.forEach(function(d) {[/i][/i][/i]
var source = indexByName.get(name(d.name)),
row = matrix[source];
if (!row) {
row = matrix[source] = [];
for (var i = -1; ++i < n;) row[i] = 0;
}
d.imports.forEach(function(d) { row[indexByName.get(name(d))]++; });
});

chord.matrix(matrix);

var g = svg.selectAll(".group")
.data(chord.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover",mouseover);

// Add a mouseover title.
g.append("title").text(function(d, i) {
//filter
return nameByIndex.get(d.index);//al pasar el mouse encima regresa el nombre el campo seleccionado
});

// Add the group arc. crea el circulo exterior
var groupPath = g.append("path")
.attr("id", function(d, i) { return "g" + i; })
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("d", arc);

// Add a text label. dibuja los nombres y uniones
var groupText = g.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");})
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return nameByIndex.get(d.index); });

// Remove the labels that don't fit. 
//aqui va la condicion para ocultar lo que quiero, pero no se como

var chord2=svg.selectAll(".chord")
.data(chord.chords)
.enter()
.append("path")
.attr("class", "chord")
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
.style("fill", function(d) { return fill(d.source.index); })
.attr("d", path);

// Add an elaborate mouseover title for each chord.
chord2.append("title").text(function(d) {
return "evento mouse";
});

function mouseover(d,i)
{
chord2.classed("fade",function(p){
//svg.select(".chord").index();
return p.source.index != i
&& p.target.index != i;
}
);
}

});

d3.select(self.frameElement).style("height", outerRadius * 2 + "px");

</script>
<footer>
<aside>29 Noviembre, 2013</aside>
<i>Ingrid Ibarra</i>
</footer>

// ************************************************** ****
El código .JSON

Código: [Seleccionar]

[
{"name":"flare.Ricardo.1.o","size":3,"imports":["flare.Ingrid.2.i","flare.ss.3.i"]},
{"name":"flare.Ricardo.1.i","size":33,"imports" :[]},
{"name":"flare.Ingrid.2.o","size":34,"imports":["flare.ss.3.i","flare.aa.3.i"]},
{"name":"flare.Ingrid.2.i","size":34,"imports":[]},
{"name":"flare.ss.3.o","size":10,"imports":["flare.Ingrid.2.i"]},
{"name":"flare.sse.3.i","size":10,"imports":[]},
{"name":"flare.ssr.3.i","size":140,"imports":["flare.sst.3.i"]},
{"name":"flare.sst.3.i","size":10,"imports":[]},
{"name":"flare.ssg\".3.i","size":1,"imports":["flare.Ingrid.2.i"]},

{"name":"flare.aa.3.o","size":160,"imports":["flare.Ingrid.2.i"]},
{"name":"flare.aa.3.i","size":1640,"imports":[]}
]

// ************************************************** ****

Espero me puedan orientar por favor

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Mensajes - ingrid2ir

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Como usar mouseover d3 javascript

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Como usar mouseover d3 javascript y json

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias: