Skip to content

Instantly share code, notes, and snippets.

@ricardo101289

ricardo101289/Proyecto_web.markdown

Forked from anonymous/Proyecto_web.markdown
Last active August 29, 2015 14:25
Download ZIP
Raw
index.html
<html>
<head>
<title>D3</title>
<center><img src="http://original.livestream.com/filestore/logos/4907675e-88cc-ceff-091a-206d3b58fa42-banner.png" class="img-responsive" width="1000" height="30"></center><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<body>
<div class="container">
<div class="row">
<input type = "text" id="b">
<input type= "button" id="buscar" value = "Buscar">
</div>
<hr>
<div class="row">
<div class="col-md-4 thumbnail" style="float:left" id="chart"></div>
<div class="col-md-8">
Detalle de Nodo Pulsado
<div id="viz"></div>
<div id="detalle">
</div>
</div>
</div>
</div>
<div id="graph">
</div>
</body>
</html>
Raw
script.js
var cont =0;
var cont2=0;
jQuery(document).ready(function($) {
console.log('ready');
$("#buscar").on("click", function(){
var texto ="";
var tag = $("#b").val();
console.log("taggg");
console.log(tag);
if (tag != null) {
jQuery.ajax({
url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.librospublicados/buscarPorId?id='+tag+'&jsoncallback=?',
type: 'POST',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
console.log("complete"+textStatus);
},
success: function(data, textStatus, xhr) {
//called when successful
//console.log("abajo esta el json");
console.log(JSON.stringify(data));
graficar(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log("error"+textStatus);
//called when there is an error
}
});
};
if (tag == "") {
jQuery.ajax({
url: 'http://carbono.utpl.edu.ec:8080/RESTFUL_SICA/webresources/entidades.librospublicados/listar?jsoncallback=?',
type: 'POST',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
console.log("complete"+textStatus);
},
success: function(data, textStatus, xhr) {
//called when successful
//console.log("abajo esta el json");
//console.log(JSON.stringify(data));
graficar(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log("error"+textStatus);
//called when there is an error
}
});
};
});
});
function graficar(nodes){
console.log ("hola este es tu nodo");
//console.log (JSON.stringify(nodes));
var vis = d3.select("#chart")
.append("svg")
.attr("width", 200).attr("height", 200);
/*
var nodes = [
{x: 10, y: 50},
{x: 70, y: 10},
{x: 140, y: 50}
]
var links = [
{source: nodes[0], target: nodes[1]},
{source: nodes[2], target: nodes[1]}
]
var color = d3.scale.category20();
vis.selectAll(".line")
.data(links)
.enter()
.append("line")
.attr("x1", function(d) { return d.source.x })
.attr("y1", function(d) { return d.source.y })
.attr("x2", function(d) { return d.target.x })
.attr("y2", function(d) { return d.target.y })
.style("stroke", "rgb(6,120,155)");
*/
vis.selectAll("circle.nodes")
.data(nodes)
.enter()
.append("svg:circle")
.attr('cx', function(d){ for (l in d){
alert(l.name);
console.log ("soy xxxx"); console.log (l.name);
if (l == 'x'){
cont = cont+1;
return cont * 50;
cont = cont-1;
}
} })
.attr('cy', function(d){ for (l in d){ if (l == 'y'){
cont2 = cont2+1;
return cont2 * 50;
} } })
//.attr("cx", function(d) { return d.x; })
//.attr("cy", function(d) { return d.y; })
.attr("r", "40px")
.attr("fill",function(d,i){return color(i);});
}
Raw
style.css
circle {
color: black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment