17

私はd3.jsを使用して簡単なドーナツチャートを作成しています。

チャートに奥行きを加えるためのドロップシャドウまたはボックスシャドウ効果を実現できていません。私は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;
}

タグとgタグをパスしますが、役に立ちません。これがCSSで可能かどうか、またはある種の言い回しを知っている人はいますか？

そのような基本的な問題の助けに本当に感謝します。マット

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);
4

5 に答える 5

23

誰かがこれに遭遇した場合に備えて。。。

 /* 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");

次に、このフィルターをsvg要素（線や棒など）にアタッチします。。。

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .attr("filter", "url(#dropshadow)");
于 2013-06-28T20:51:14.157 に答える
11

影の色を制御する必要がある場合、これは私のために働きました：

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：この回答から化：https ：//stackoverflow.com/a/25818296/1154787

于 2014-11-17T02:05:08.407 に答える
9

svgフィルターを使用できます。これは、ブラーフィルターを適用する方法を示す1つの例です。

ドロップシャドウのsvgフィルターの例をここで見ることができます。2つの例を組み合わせて、必要なものを取得します。

于 2012-09-05T09:29:28.220 に答える
1

@ErikDahlströmが投稿した情報を使用して、ドロップシャドウ付きのSVG rectグラフィックのd3.jsを使用した簡単なコメント例を作成しました：http ：//bl.ocks.org/cpbotha/5200394 :)

于 2013-03-19T21:54:22.357 に答える
1

Googleのマテリアルデザインによると、人間は知覚能力が非常に高いため、影は現実世界の状況に近いはずです。したがって、シャドウはアンビエントコンポーネントとキャストコンポーネントで構成する必要があります。こちらのGoogleの仕様をご覧ください。

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

上記のすべてが影の優れた例ですが、複合的なものの例は見つからなかったので、このカスタムメイドのフィルターを共有したいと思います。それは最終結果をより現実的に見えるようにするようです。

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");

これは、そのようにオブジェクトに適用できます。

var r = element.append("rect")
    .attr("class", "element-frame")
    :   // other settings
    .style("filter", "url(#md-shadow)");
于 2015-03-22T19:53:20.380 に答える