d3 Сброс элементов до их исходного цвета - PullRequest
Новая
       27

d3 Сброс элементов до их исходного цвета

0 голосов
/ 02 июня 2018

Длинный пост, простой вопрос.Я взял шаблон солнечных лучей и добавил функциональность выделения.Когда вы наводите курсор на «узел», он выделяет все другие узлы с тем же именем.Это можно найти в следующем коде (mouseover и mouseout внизу): 

! function() {
  // Stuff to build the sunburst
  var width = 960,
    height = 700,
    radius = (Math.min(width, height) / 2) - 10;

  var formatNumber = d3.format(",d");

  var x = d3.scaleLinear()
    .range([0, 2 * Math.PI]);

  var y = d3.scaleSqrt()
    .range([0, radius]);

  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var partition = d3.partition();

  var arc = d3.arc()
    .startAngle(function(d) {
      return Math.max(0, Math.min(2 * Math.PI, x(d.x0)));
    })
    .endAngle(function(d) {
      return Math.max(0, Math.min(2 * Math.PI, x(d.x1)));
    })
    .innerRadius(function(d) {
      return Math.max(0, y(d.y0));
    })
    .outerRadius(function(d) {
      return Math.max(0, y(d.y1));
    });

  // Create the svg element
  var svg = d3.select("#vis").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

  // Load the json file
  d3.json("static/js/wheel.json", function(error, root) {
        if (error) throw error;
        root = d3.hierarchy(root);
        root.sum(function(d) {
          return d.size;
        });

        var path = svg.selectAll("path")
          .data(partition(root).descendants())
          .enter().append("g")
        path.append("path")
          .attr("d", arc)
          .attr("name", function(name) {
            return name.data.name
          })

          .style("fill", function(d) {
            return color((d.children ? d : d.parent).data.name);
          })
          //Zoom in function
          .on("click", click) 
          //When mouse enters node
          .on("mouseover", function() { 
            var name = d3.select(this).attr("name");
            var col = d3.select(this).style("fill");
            d3.selectAll("path")
              .filter(function(d) {
                return d3.select(this).attr("name") === name;
              })
              .style('fill', 'orange')
              .style('stroke', '#ff0d3c')
              .style("stroke-width", "3");
          })
          //mouse leaves node
          .on("mouseout", function() { 
            d3.selectAll("path").style("fill", function(d) {
                return color((d.children ? d : d.parent).data.name);
              })
              .style("stroke", "#000")
              .style("stroke-width", "1")
          })

Это работает как брелок, подсвечивает узлы и возвращает их в исходный цвет после перемещениямышь выключена.Но теперь я также добавил текстовое поле input к html, которое выделяет узлы с тем же именем, что и текст текстового поля.(подсвечивается при вводе): 

d3.select("#highlightWord").on("input", function() {
    // Reset all the nodes to their original color here?

    var name = this.value;
    // Highlight all nodes that match textbox
    d3.selectAll("path")
        .filter(function (d) {
        return d3.select(this).attr("name") === name;
        })
        .style('fill', 'orange')
        .style('stroke','#ff0d3c')
        .style("stroke-width","3");
});

Проблема в том, что я не знаю, как сбросить цвет отсюда после того, как текстовое поле больше не соответствует именам узлов.Я думаю, что самый простой способ - сбросить все узлы при каждом обновлении текстового поля, чтобы оно сбрасывало каждый узел, а затем изменял те, которые совпадают. Но я понятия не имею, как получить исходные цвета / стиль узла здесь .В результате каждый раз, когда узел соответствует текстовому полю, он будет выделен навсегда, пока не сработает функция mouseout.

Я был бы очень признателен, если бы кто-то мог сказать мне, как сбросить узлы после того, как они не совпадаюттекстовое поле больше, заранее спасибо!

...