2
Hier finden Sie die CSV-Datei https://www.dropbox.com/s/0ekwalkwqahl806/PeriodicTable.csv?dl=0Bewegen Sie den Cursor Ereignis Timeout
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect.bordered {
stroke: grey;
stroke-width:2px;
}
text.mono {
font-size: 9pt;
font-family: Consolas;
fill: blue;
}
</style>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="chart" ></div>
<script type="text/javascript" >
//cree les variables
var margin = { top: 50, right: 0, bottom: 0, left: 30 },
width = 960 - 30 ,
height = 430 - 50 ,
espacecases = 3
gridSize = Math.floor(width/18),//changer la taille du tableau
ys = ["1", "2", "3", "4", "5", "6", "7"],
xs = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"];
// cree la base du svg
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + 90) //+70 por agrandire vers la droite
.attr("height", height + 250) //+200 pour agrandir l espace por l immage
.append("g") // crée un groupe contenant le tp
.attr("transform", "translate(" + 30 +"," + 50+ ")");// bouger le tp pour avoir de la place pour les axes
//axe des y
var yLabels = svg.selectAll(".yLabel")
.data(ys)
.enter()
.append("text")
.text(function (d) { return d; })
.attr("x", 0)
.attr("y", function (d, i) { return i * (gridSize + 10 + espacecases); }) // + espacecases +10 car rectangle
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize/1.5 + ")")
.attr("class", "yLabel mono axis");
// graduation axe des x
var xLabels = svg.selectAll(".xLabel")
.data(xs)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * (gridSize+ espacecases); }) //function (d,i) avec d=data et i=index of data
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + gridSize/2 + ", -6)")
.attr("class", "xLabel mono axis");
// prendre les données du fichier csv
var newlist = function(csvFile){
d3.csv(csvFile,function(d){
return {
AtomicNumber: d.AtomicNumber,
Element: d.Element,
Symbole: d.Symbole,
AtomicWeight: d.AtomicWeight,
Period: d.Period,
Group: d.Group,
Phase: d.Phase,
MostStableCrystal: d.MostStableCrystal,
Type: d.Type,
IonicRadius: d.IonicRadius,
AtomicRadius: d.AtomicRadius,
Electronegativity: d.Electronegativity,
FirstIonizationPotential: d.FirstIonizationPotential,
Density: d.Density,
MeltingPointK: d.MeltingPointK,
BoilingPointK: d.BoilingPointK,
Isotopes: d.Isotopes,
Discoverer: d.Discoverer,
YearofDiscovery: d.YearofDiscovery,
SpecificHeatCapacity: d.SpecificHeatCapacity,
ElectronConfiguration: d.ElectronConfiguration,
DisplayRow: d.DisplayRow,
DisplayColumn: d.DisplayColumn,};
},
// traitement des données
function(error,data) {
var cards = svg.selectAll(".DisplayRow")
.data(data, function(d) {
return d.DisplayRow+':'+d.DisplayColumn;
});
var word = function(d) {return (d.Element) ; };
var g = cards.enter()
.append('g')
.attr("id", function(d){return d.Type})
.append('g')
.attr("id",function(d) {return "element"+(d.AtomicNumber)})
.on("click", function(d) { if (d.Symbole!="Hg") { return window.open("http://en.wikipedia.org/wiki/"+word(d), '_blank')}
else { return window.open("http://en.wikipedia.org/wiki/"+word(d)+"_(element)", '_blank') };
});
g.attr("transform", function(d){
var x = (d.DisplayColumn - 1) * (gridSize + espacecases),
y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases);
return "translate(" + x + "," + y + ")";
});
g.append("rect")
.attr("rx", 4) // arrondir les cases des elements
.attr("ry", 4) // arrondir les cases des element
.attr("class", "xpos bordered") // class=style definit dans le head
.attr("width", gridSize) //largeur des cases d elements
.attr("height", gridSize+10) //Hauteur... //+10 pour faire rectangle
.transition()
.duration(2000)
.style("fill", function(d) {
if (d.Type =="Transition Metal") {return "LightSkyBlue"}
else if (d.Type =="Alkali Metal") { return "royalblue" }
else if (d.Type =="Noble Gas") { return "Salmon" }
else if (d.Type =="Metalloid") { return "grey" }
else if (d.Type =="Metal") { return "Peru" }
else if (d.Type =="Nonmetal") { return "gold" }
else if (d.Type =="Halogen") { return "orange" }
else if (d.Type =="Alkaline Earth Metal") { return "hotpink" }
else if (d.Type =="Lanthanide") { return "YellowGreen" }
else if (d.Type =="Actinide") { return "PapayaWhip" }
else if (d.AtomicNumber <= 112) { return "LightSkyBlue" }
else if (d.AtomicNumber <= 116) { return "Peru" }
else if (d.AtomicNumber <= 117) { return "orange" }
;}) ;
g.append("text")
.text(function(d){
return (d.AtomicNumber);
})
.style("font-size",10)
.attr("x", +10)
.attr("y", +10)
.style("text-anchor", "middle");
g.append("text")
.text(function(d) {
return (d.Symbole);
})
.style("font-size",30)
.attr("x", +25)
.attr("y", 40)
.style("text-anchor", "middle")
.on("mouseover", function(d){
var x = (d.DisplayColumn - 1) * (gridSize + espacecases),
y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases);
d3.select("body")
.select("#element"+(d.AtomicNumber))
.transition()
.ease("quad")
.duration("500")
.attr("transform", "translate(" + 200 +"," + 20+ ") scale(2.5)")
})
.on("mouseleave", function(d){
var x = (d.DisplayColumn - 1) * (gridSize + espacecases),
y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases);
d3.select("body")
.select("#element"+(d.AtomicNumber))
.transition()
.ease("quad")
.duration("300")
.attr("transform", "translate("+ x +"," + y+ ") scale(1)")
});
g.append("text")
.text(function(d) {
return (d.AtomicWeight) ;
})
.style("font-size",7)
.attr("x", +25)
.attr("y", +50)
.style("text-anchor", "middle")
.text(word);
g.append("text")
.text(function(d) {
return (d.AtomicWeight) ;
})
.style("font-size",7)
.attr("x", +25)
.attr("y",+57)
.style("text-anchor", "middle");
g.append("text")
.text(function(d) {
return (d.YearofDiscovery) ;
})
.style("font-size",7)
.attr("x", +40)
.attr("y",+10)
.style("text-anchor", "middle")
.text(function(d) { return (d.YearofDiscovery) ; });
//d3.select("body").selectAll("#Nonmetal").remove();
//d3.select("body").select("#element1").remove();
});
};
newlist("PeriodicTable.csv")
</script>
</body>
</html>ich eine periodische Tabelle aus einer csv.file erstellt. Ich habe alle Elemente in einem Svg geplottet und jedes Element hat eine Gruppe mit einer eigenen ID. Jetzt versuche ich ein größeres Element anzuzeigen, wenn die Maus auf dem atomaren Symbol bleibt. Aber dieses größere Element ist instabil, es blinkt (geht und kommt zurück). Ich denke, ein guter Weg, um das zu beheben, ist eine Mouseover-Dauer hinzuzufügen, aber ich habe keine Ahnung, wie ich das tun kann. Wenn du denkst das ist nicht das Problem und es gibt einen anderen Weg, ich bin offen!
haben Sie eine Demo irgendwo? – yezzz
Wo kann ich eine Demo hochladen? Oder das Skript? –
auf dem Post-Editor ist ein Symbol, das aussieht wie < > HTML/CSS/Skript einfügen. Aber Sie können mir auch einen Link geben, wenn Sie es bevorzugen – yezzz