Создайте тень на круге с помощью D3.js

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

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    text { 
     font: 10px sans-serif; 
    } 
</style> 
<body> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 

    var diameter = 960, 
      format = d3.format(",d"), 
      color = d3.scale.category20c(); 

    var bubble = d3.layout.pack() 
      .sort(null) 
      .size([diameter, diameter]) 
      .padding(1.5); 

    var svg = d3.select("body").append("svg") 
      .attr("width", diameter) 
      .attr("height", diameter) 
      .attr("class", "bubble"); 

    d3.json("./data.json", function(error, root) { 
     if (error) throw error; 

     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
       .filter(function(d) { return !d.children; })) 
       .enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     node.append("title") 
       .text(function(d) { return d.className + ": " + format(d.value); }); 

     node.append("circle") 
       .attr("r", function(d) { return d.r; }) 
       .style("fill", function(d) { return color(d.value); }); 

     node.append("text") 
       .attr("dy", ".3em") 
       .style("text-anchor", "middle") 
       .text(function(d) { return d.className.substring(0, d.r/3); }); 

     node.on("click", click); 
     function click(d){ 


      d.style("box-shadow: 8px 8px 0px #aaa;"); // don't put a shadow 
     } 
    }); 

    // Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
     var classes = []; 
     function recurse(name, node) { 
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
      else classes.push({packageName: name, className: node.name}); 
     } 
     recurse(null, root); 
     return {children: classes}; 
    } 
    d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 
</body>

Спасибо.

источник

2016-04-24 Anonyme

проверки HTTP: //stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 – echonax

Здесь есть несколько вопросов.

Легко исправить это вы звоните d.style("box-shadow: 8px 8px 0px #aaa;"); // don't put a shadow - это просто собирается выбросить ошибку, поскольку d - это данные, а не элемент dom. Вы должны делать d3.select(this).select("circle").style и т.д.

на вершине этого box-shadow стиль не работает на элементах внутри SVG, в конце концов filter: drop-shadow будет работать кросс-браузер, но только светлячок в данный момент, например, в CSS: filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

Таким образом, вы должны использовать эффекты SVG фильтра указали в комментариях выше, и применять его в качестве style("filter", ...) к d3.select(this).select("circle")

См https://plnkr.co/edit/PLJWW0BG4F0e81fD9xB1 для примера раздвоенного от вашего

источник

2016-04-24 20:03:04 mgraham

Спасибо, что это работает! У меня есть другой вопрос, мы можем отменить эффект фильтра, но как отменить эффект применяемого стиля? 'd3.select (this) .select (" circle "). style ('fill', 'darkOrange');' Мой круг остается оранжевым. – Anonyme

Не могу сказать наверняка, но я думаю, что вы просто восстановили старый цвет с помощью '.style (« fill », function (d) {return color (d.value);});' – mgraham

Создайте тень на круге с помощью D3.js

ответ

Смежные вопросы