Как обновлять цвет элементов в SVG при наведении указателя мыши на второй SVG с помощью D3

Question

Я создал два разных SVGs. Один содержит график с точками данных, другой содержит три строки. Цвет линий должен зависеть от выбранной точки данных, и мне еще не удалось это сделать (подробнее см. Ниже). Jsfiddle можно найти здесь: jsfiddle.

Что я хотел бы сделать, это изменить цвет трех линий, когда я mouseover данных точек. Мне удалось изменить цвет всех строк на один и тот же цвет, но на самом деле хотелось бы использовать цвет, связанный с соответствующей точкой данных, но я не знаю, как передать данные цвета, хранящиеся в myColors, функции где я устанавливаю цвет линий.

Соответствующий код приведен ниже. Я добавляю график с точками datapoints к mySvg, и когда I mouseover точек данных, я меняю их цвет на черный, а цвет линий в другом SVG - зеленый. Однако вместо того, чтобы менять цвет всех линий на зеленый, мне бы хотелось изменить их цвета на цвета, определенные в myColors (см. Приведенный выше связанный jsfiddle, чтобы найти данные). Как я могу это сделать?

var circles = mySvg.selectAll("circle") 
         .data(lineData) 
         .enter() 
         .append("circle"); 

var circleAttributes = circles 
         .attr("cx", function (d) { return xScale(d.x); }) 
         .attr("cy", function (d) { return yScale(d.y); }) 
         .attr("r", 6) 
         .style("fill", 'red') 
         .on('mouseover', function(d){ 
          d3.select(this).style("fill", 'black'); 
          d3.select('#myLines').selectAll("line").attr("class","sweepline").style("stroke", 'green'); 

          }) 

         .on('mouseout', function(d){ 
          d3.select(this).style("fill", 'red'); 

         }); 

Answer 1

Как и многие проблемы с d3, этот вопрос легко решается с помощью привязки данных. Ваши пользовательские цвета могут быть привязаны к строкам, которые вы добавляете ко второму SVG. Поскольку ваш массив myColors, состоящий из массивов пользовательских цветов в строке, имеет ту же структуру, что и другие ваши массивы, такие как names, x1Val, y1Val и т. Д., Его можно легко интегрировать в массив данных coords, используемый для привязки информации к вашим линиям :

var coords = d3.zip(names, x1Val, y1Val, x2Val, y2Val, myColors); 

Эти данные в строке могут быть впоследствии использованы в обработчике mouseover событий для ваших кругов, задающих stroke стиль на линиях.

.on('mouseover', function(d,i) { 
    // ... 
    d3.select('#myLines') 
     .selectAll("line") 
      .style("stroke", function(d) { 
       return d[5][i].color; 
      }); 
}) 

Обратный вызов определяет цвет по

1. доступом массив пользовательских цветов, который в положении 5 массива данных, связанного с линиями, следовательно, d[5],
2. получая в i тыс объект этого массива цветов. i является показателем этого круга, который передается в качестве параметра в обработчик событий и сделал доступными для stroke обратного вызова с помощью закрытия,
3. получает свойство .color от этого объекта

Проверьте обновленный JSFiddle для рабочий пример.

---

Кроме того, я обновил mouseout обработчик, чтобы удалить ранее установленный stroke стиль вызывает линии, чтобы сбросить их цвет по умолчанию, установленного класса sweepline. Такое поведение, по крайней мере, на моих глазах, казалось, пропало.

d3.select('#myLines') 
    .selectAll("line") 
     .style("stroke", null);