0

CSS 基礎コース (codeschool) で学んだことを適用して d3 オブジェクトのスタイルを設定しようとしていますが、今のところうまくいきません。

グラフのスタイルを設定する CSS クラスがたくさんあります。2 種類のチャートがあります。2 番目のタイプでは、1 つの色をオーバーライドする必要があります。

主な CSS (自分で作成したものではありません)

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

CSS をオーバーライドします (私の 2 番目のタイプでは、別の色が必要でした) (これは以前、すべての地平線をHorizo​​n_small に変更した最初のファイルでしたが、これは悪いことです。)

.horizon .horizon_small {
  border-top: solid 1px #bdbdbd;
  border-bottom: solid 1px #bdbdbd;
}

ここにこれを適用します：

 d3.select("#mychart")
   .selectAll(".horizon")
   .data(data).enter().insert("div", ".bottom")
   .attr("class", ["horizon", "horizon_small"]) // used to be "horizon_small" only

しかし、どこに問題があるのか​​ わかりません。

4

2 に答える 2

1

セレクター「.horizo​​n .horizo​​n_small」は、クラス「horizo​​n」を持つ他の要素の内部 (あるレベル) でクラス「horizo​​n_small」を持つ要素をターゲットにします。両方のクラスを持つ要素のみをターゲットにしたい場合は、セレクターを「.horizo​​n.horizo​​n_small」にする必要があります。

ソース: http://www.w3.org/TR/CSS2/selector.html#class-html

于 2013-08-19T16:50:49.970 に答える