Comment ajouter un effet d'ombre portée à d3.js tarte ou donut graphique

Je suis en utilisant d3.js pour faire un simple beignet graphique.

Je ne suis pas d'atteindre une ombre portée ou box-shadow effet pour ajouter de la profondeur au tableau. J'ai essayé d'ajouter le css:

path {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

De chemin de balises et la g des balises, mais en vain. Quelqu'un sait si cela est possible en CSS ou connaissez un wordaround de la sorte?

Apprécie vraiment l'aide sur un problème de base. Matt

var data = [0, 35, 65];

var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
   ir = r * 0.5,
   color = d3.scale.category20(),
   donut = d3.layout.pie().sort(null),
   arc = d3.svg.arc().innerRadius(ir).outerRadius(r);

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
   .attr("height", h)
.append("svg:g")
   .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var arcs = svg.selectAll("path")
    .data(donut(data))
.enter().append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

OriginalL'auteur matt | 2012-09-05

9

Vous pouvez utiliser des filtres svg, voici un exemple montrant comment appliquer un filtre de flou.

Un exemple de dropshadow filtre svg peut être vu ici. Combiner les deux exemples pour obtenir ce dont vous avez besoin.

Je ne savais pas que ça existait, merci Erik!
et voici quelques utiles code de référence pour un d3-spécifiques, par exemple: github.com/wbzyl/d3-notes/blob/master/hello-drop-shadow.html

OriginalL'auteur Erik Dahlström

Dans le cas où quelqu'un vient sur ce. . .

 /* For the drop shadow filter... */
  var defs = svg.append("defs");

  var filter = defs.append("filter")
      .attr("id", "dropshadow")

  filter.append("feGaussianBlur")
      .attr("in", "SourceAlpha")
      .attr("stdDeviation", 4)
      .attr("result", "blur");
  filter.append("feOffset")
      .attr("in", "blur")
      .attr("dx", 2)
      .attr("dy", 2)
      .attr("result", "offsetBlur");

  var feMerge = filter.append("feMerge");

  feMerge.append("feMergeNode")
      .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
      .attr("in", "SourceGraphic");

Alors joindre ce filtre à l'élément svg, comme une ligne ou une barre ou quoi que ce soit chatouille votre fantaisie. . .

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .attr("filter", "url(#dropshadow)");

Très utile exemple,merci. Est-il un moyen de faire de l'ombre intérieure plutôt qu'extérieure ?
stackoverflow.com/questions/29397152/... c'est une méthode pour ajouter un point culminant - le tordre pour en faire une ombre interne
Est-il possible de le faire sans attribuer un ID pour l'ombre? Aussi, lorsque l'on veut créer plus d'un de ces dynamiquement une page?

OriginalL'auteur reptilicus

Dans le cas où vous avez besoin de contrôler le couleur de l'ombre, cela a fonctionné pour moi:

var defs = svg.append("defs");

    var filter = defs.append("filter")
        .attr("id", "dropshadow")

    filter.append("feGaussianBlur")
        .attr("in", "SourceAlpha")
        .attr("stdDeviation", 4)
        .attr("result", "blur");
    filter.append("feOffset")
        .attr("in", "blur")
        .attr("dx", 2)
        .attr("dy", 2)
        .attr("result", "offsetBlur")
    filter.append("feFlood")
        .attr("in", "offsetBlur")
        .attr("flood-color", "#3d3d3d")
        .attr("flood-opacity", "0.5")
        .attr("result", "offsetColor");
    filter.append("feComposite")
        .attr("in", "offsetColor")
        .attr("in2", "offsetBlur")
        .attr("operator", "in")
        .attr("result", "offsetBlur");

    var feMerge = filter.append("feMerge");

    feMerge.append("feMergeNode")
        .attr("in", "offsetBlur")
    feMerge.append("feMergeNode")
        .attr("in", "SourceGraphic");

d3:isée de cette réponse: https://stackoverflow.com/a/25818296/1154787

OriginalL'auteur codebreaker

1

Je vous ai fait un simple exemple commenté avec d3.js de SVG rect graphiques avec des ombres portées, à l'aide de l'information @Erik Dahlström posté le: http://bl.ocks.org/cpbotha/5200394 🙂

OriginalL'auteur Charl Botha

Selon Google, la Conception de Matériel, une ombre devrait se rapprocher des conditions réelles que les humains ont une grande capacité de perception. Ainsi, une ombre devrait être composé d'une ambiante et une fonte de la composante. Voir Google spécification ici..

http://www.google.com/design/spec/what-is-material/environment.html#environment-light-shadow

Tous les ci-dessus sont d'excellents exemples de l'ombre, mais je ne pouvais pas trouver des exemples de composite, donc je pensais que je voudrais partager cette coutume de filtres. Il ne semble pas faire le résultat final semble plus réaliste.

var id = "md-shadow";
var deviation = 2;
var offset = 2;
var slope = 0.25;
var svg = d3.select("#yoursvg");
var defs = svg.select("defs");
//create filter and assign provided id
var filter = defs.append("filter")
.attr("height", "125%")    //adjust this if shadow is clipped
.attr("id", id);
//ambient shadow into ambientBlur
//  may be able to offset and reuse this for cast, unless modified
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", deviation)
.attr("result", "ambientBlur");
//cast shadow into castBlur
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", deviation)
.attr("result", "castBlur");
//offsetting cast shadow into offsetBlur
filter.append("feOffset")
.attr("in", "castBlur")
.attr("dx", offset - 1)
.attr("dy", offset)
.attr("result", "offsetBlur");
//combining ambient and cast shadows
filter.append("feComposite")
.attr("in", "ambientBlur")
.attr("in2", "offsetBlur")
.attr("result", "compositeShadow");
//applying alpha and transferring shadow
filter.append("feComponentTransfer")
.append("feFuncA")
.attr("type", "linear")
.attr("slope", slope);
//merging and outputting results
var feMerge = filter.append("feMerge");
feMerge.append('feMergeNode')
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");

Ceci peut être appliqué à un objet, comme c'est le cas..

var r = element.append("rect")
.attr("class", "element-frame")
:   //other settings
.style("filter", "url(#md-shadow)");

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.