Jadi saya menggambar pohon (agak mirip dengan pohon keputusan) dengan D3.js, menggunakan template yang saya temukan online. Tujuan saya saat ini adalah untuk mewarnai tepi (atau links) menurut properti dari setiap objek link.

Langkah pertama saya adalah mewarnai semua tepi terlepas dari propertinya, jadi saya menambahkan baris berikut:

      // Update the links…
      var link = svgGroup.selectAll("path.link")
          .data(links, function(d) {
              return d.target.id;
          });

      // Enter any new links at the parent's previous position.
      link.enter().insert("path", "g")
          .attr("class", "link")
          //.style("stroke", "red")  ---- this new line changes the color of all links
          .attr("d", function(d) {
              var o = {
                  x: source.x0,
                  y: source.y0
              };
              return diagonal({
                  source: o,
                  target: o
              });
          });

Sekarang, saya ingin mewarnai mereka sesuai dengan properti mereka. Ini dapat diakses melalui inisialisasi link pertama:

  // Update the links…
  var link = svgGroup.selectAll("path.link")
      .data(links, function(d) {
          // const booleanProperty = d.target.colorProperty;  --- change color according to this property
          return d.target.id;
      });

Pikiran saya adalah membuat 2 variabel berbeda - satu menyimpan tautan dengan properti yang disetel ke true dan yang lainnya dengan properti yang disetel ke false, jadi saya bisa mengubah warna setiap grup link . Agak seperti ini:

 // Update the links…
  var trueLink = svgGroup.selectAll("path.link")
      .data(links, function(d) {
          const booleanProperty = d.target.colorProperty;  --- change color according to this property
          if (booleanProperty) return d.target.id;
      });

  var falseLink = svgGroup.selectAll("path.link")
      .data(links, function(d) {
          const booleanProperty = d.target.colorProperty;  --- change color according to this property
          if (!booleanProperty) return d.target.id;
      });

Upaya ini tidak berhasil, karena selectAll("path.link") mengembalikan semua tautan terlepas dari apakah ada kondisi untuk kembali hanya dalam kasus tertentu. Saya juga mencoba menggunakan select("path.link"), tetapi saya mendapatkan hasil yang sama persis.

Apakah ada cara saya bisa melakukan ini?

0
GRoutar 17 April 2020, 19:48

1 menjawab

Jawaban Terbaik

Saya berasumsi bahwa Anda ingin mengatur gaya itu dalam pilihan "masukkan" untuk item baru, sehingga Anda dapat mencoba melakukan kondisi di dalam panggilan .style, seperti ini:

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
    .attr("class", "link")
    .style("stroke", function(d) { return condition ? "red" : "blue"; } )
    .attr("d", function(d) {
      var o = {
          x: source.x0,
          y: source.y0
      };
      return diagonal({
          source: o,
          target: o
      });
  });

Di mana "kondisi" mungkin apa pun yang Anda butuhkan. Jika kondisi atau warna disimpan dalam datum, Anda dapat mengembalikan d.target.colorProperty atau menggunakannya untuk kondisi tersebut.

1
Raúl Herrero 17 April 2020, 17:03