Блог

Главная - Вопросы по программированию - измените цвет узлов, нажав на

измените цвет узлов, нажав на

#javascript #d3.js

Вопрос:

Как я могу изменить цвет своего узла? Если я нажму на узел, который ранее был синим, он должен изменить цвет, например, на фиолетовый. Но если я сейчас нажму на другой узел, этот узел должен стать фиолетовым, а ранее нажатый узел должен получить старый цвет (т. Е. Снова стать синим). как мне это сделать?

 const color = d3.scaleLinear().domain([0, 1]).range(["#03fc90", "#03dbfc"]);
var node = svg.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(dataset.nodes)
  .enter()
  .append("circle")
  .attr("r", 5)
  .style("fill", function(d,i) {
    return color(i);})
   .on("click", (evt, currentNode) => {    
    d3.select(this).
    .style.color=’purple’
  });

Комментарии:

1. С помощью метода, который я создал, узел не мог изменить свой цвет. Но я только что это выяснил. Спасибо.

Ответ №1:

  1. При начальной визуализации установите fill стиль по умолчанию для каждого узла.
  2. По щелчку мыши найдите ранее выбранный узел, удалите «выбранный» класс и установите цвет по умолчанию
  3. Для нового узла установите «выбранный» класс и цвет
 const nodes = [
  {id: 1, x: 50, y: 50},
  {id: 2, x: 50, y: 100},
  {id: 3, x: 100, y: 75},
];

const svg = d3.select('svg');
  svg.selectAll('circle.node')
    .data(nodes, d => d.id)
    .enter()
    .append('circle')
    .classed('node', true)
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', 20)
    .style('fill', 'blue')
    .style('cursor', 'pointer')
    .on('click', onClickNode);
  
function onClickNode (e, d) {
  svg.selectAll('.node.selected')
    .classed('selected', false)
    .style('fill', 'blue');
  
  d3.select(this)
    .classed('selected', true)
    .style('fill', 'purple');
}   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

<svg />
Метки: ,