11522 sujets

JavaScript, DOM et API Web HTML5

Changer la class d'un autre élément

Bonjour,

J'ai fait un schéma en D3 Javascript ici : http://www.korsakoff-syndrom.eu/chimie-cerveau.html

Les liens entre chaque élément apparaissent en surbrillance quand je passe dessus.

Mais je voudrais aussi que, quand je passe sur un élément spécifique (par exemple sur le rectangle du node "stress", qui a l'id "rect62"), ça change l'opacité de gommettes (les "cerveau-etiquettes" à la fin) d'une class spécifique sur le schéma du cerveau en bas (par exemple pour "stress", ça passe les gommettes qui ont la class "rec" de l'opacité spécifiée par la classe "bz-off", 0.3, à la classe "bz-on", 0.8.
J'ai essayé ça : 


document.getElementById("rect62").onclick = function(){
document.getElementById("ellipse-noyau-accumbens").className = "bz-on";
}


mais ça ne fonctionne évidemment pas.

NB je ne suis pas très technique, je tatouille en lisant des forums.

Merci beaucoup

Marie

Voici mon code :


....
.bz-off {
opacity:0.3; 
}
.bz-on {
opacity:0.8; 
}
.rec {
fill:#35a7bf;
}
.symp {
fill:#4d4d4d;
}
.ocy {
fill:#008b00;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<svg width="1490" height="700"></svg>
<script>
....

var chimie = {"nodes":[
{"name":"alanine","group":"2"},//0
{"name":"arginine°","group":"2"},//1
{"name":"acide aspartique","group":"2"},//2
{"name":"asparagine","group":"2"},//3
{"name":"cystéine","group":"2"},//4
.....
],
"links":[
{"source":0,"target":95,"value":0.5},//0
{"source":6,"target":95,"value":0.5},
{"source":11,"target":95,"value":0.5},
{"source":95,"target":83,"value":1.5},
.....
]};

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [width - 1, height - 6]]);

var link = svg.append("g")
    .attr("class", "links")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke-opacity", 0.2)
  .selectAll("path");

var node = svg.append("g")
    .attr("class", "nodes")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
  .selectAll("g");
              
sankey(chimie);

link = link
    .data(chimie.links)
    .enter().append("path")
      .attr("d", d3.sankeyLinkHorizontal())
      .attr("stroke-width", function(d) { return Math.max(1, d.width); })
	  .attr("id", function(d,i){
        d.id = i;
        return "link-"+i;
      });

// link hover values
link.append("title")
      .text(function(d) { return d.source.name + " ? " + d.target.name; });

node = node
    .data(chimie.nodes)
    .enter().append("g");

node.append("rect")
      .attr("x", function(d) { return d.x0; })
      .attr("y", function(d) { return d.y0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
	  .attr("id", function(d,i){
        d.id = i;
        return "rect"+i;
      })
      .style("fill", function(d) { return color(d.group); })
      .attr("stroke", "#A9A9A9")
	  .on("mouseover", showConnections)
      .on("mouseout", hideConnections);

node.append("text")
      .attr("x", function(d) { return d.x0 - 6; })
      .attr("y", function(d) { return (d.y1 + d.y0) / 2; })
      .attr("dy", "0.35em")
	  .attr("class","nodelabel")
	  .attr("id", function(d,i){
        d.id = i;
        return "label"+i;
      })
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x0 < width / 2; })
      .attr("x", function(d) { return d.x1 + 6; })
      .attr("text-anchor", "start");
		
d3.selectAll(".node").on("click", handleNodeClick);

  function showConnections(d) {
      d3.select(this).style("stroke","black")
          .style("stroke-opacity", 1);
      link.style("stroke-opacity", function(l) {
          if (l.source.name == d.name || l.target.name == d.name) {
              return 1;
          }
          else 
              return 0.2;
      });
  }

  function hideConnections(d) {
      d3.select(this).style("stroke",rgbToHex(160, 160,160))
          .style("stroke-opacity", 0.7);
      link.style("stroke-opacity", 0.2);
  }
  
document.getElementById("rect62").onclick = function(){
document.getElementById("ellipse-noyau-accumbens").className = "bz-on";
}
</script>
<div id="Legende">
<div id="cerveau">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="382px" height="187px" viewBox="107.445 288.775 474 234" enable-background="new 107.445 288.775 474 234"
	 xml:space="preserve">
<g id="cerveau-path">
			...
	</g>

<g id="cerveau-etiquettes">
....
	<ellipse class="ocy bz-off" id="ellipse-ganglions" cx="333.333" cy="387.5" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-atv" cx="351.333" cy="424.5" rx="8.333" ry="7.833"/>
	<ellipse class="symp bz-off" id="ellipse-moelle" cx="358" cy="498.667" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-amygdale" cx="375.333" cy="425.333" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-hippocampe" cx="405.667" cy="409.667" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-insula" cx="420.945" cy="390.333" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-hypophyse" cx="315.333" cy="440.333" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-hypothalamus" cx="333.333" cy="411.167" rx="8.333" ry="7.833"/>
	<ellipse class="rec bz-off" id="ellipse-noyau-accumbens" cx="306.333" cy="405.51" rx="8.333" ry="7.833"/>
</g>
</div>
<div id="graphText">
...
</div>
</body>
</html>
Sujet clos
Aller à