d3根據高度改變條形圖顏色-有解無憂

我創建了一個條形圖，可以通過滑鼠拖動擴展或減小每個條的高度，它會根據拖動的值自動更改資料。我想改變顏色，當我擴大它的高度時，每個條形變得更紅，當我降低它的高度時，它變得更綠。我怎樣才能實作它？

<!DOCTYPE html>
<html>
  <style>
    .selection {
      fill: steelblue;
      fill-opacity: 1;
    }

    body {
      width: 80%;
      margin: auto;
    }
  </style>
  <body >
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script>
      var data = [
        { index: 0, value: 18 },
        { index: 1, value: 20 },
        { index: 2, value: 19 },
      ];

      var widthY = 550,
        heightY = 600,
        delim = 4;

      var scaleY = d3.scaleLinear().domain([0, 21]).rangeRound([heightY, 0]);

      var x = d3.scaleLinear().domain([0, data.length]).rangeRound([0, widthY]);

      var svgY = d3
        .select("body")
        .append("svg")
        .attr("width", widthY)
        .attr("height", heightY)
        .attr("fill", "green")
        .append("g");

      var brushY = d3
        .brushY()
        .extent(function (d, i) {
          return [
            [x(i)   delim / 2, 0],
            [x(i)   x(1) - delim / 2, heightY],
          ];
        })
        .on("brush", brushmoveY)
        .on("end", brushendY);

      var svgbrushY = svgY
        .selectAll(".brush")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "brush")
        .append("g")
        .call(brushY)
        .call(brushY.move, function (d) {
          return [d.value, 0].map(scaleY);
        });

      svgbrushY
        .append("text")
        .attr("y", function (d) {
          return scaleY(d.value)   25;
        })
        .attr("x", function (d, i) {
          return x(i)   x(0.5);
        })
        .attr("dx", "-.60em")
        .attr("dy", -5)
        .style("fill", "white")
        .text(function (d) {
          return d3.format(".2")(d.value);
        });

      function brushendY() {
        if (!d3.event.sourceEvent) return;
        if (d3.event.sourceEvent.type === "brush") return;
        if (!d3.event.selection) {
          svgbrushY.call(brushY.move, function (d) {
            return [d.value, 0].map(scaleY);
          });
        }
      }

      function brushmoveY() {
        if (!d3.event.sourceEvent) return;
        if (d3.event.sourceEvent.type === "brush") return;
        if (!d3.event.selection) return;

        var d0 = d3.event.selection.map(scaleY.invert);
        var d = d3.select(this).select(".selection");

        d.datum().value = d0[0];

        update();
      }

      function update() {
        svgbrushY
          .call(brushY.move, function (d) {
            return [d.value, 0].map(scaleY);
          })
          .selectAll("text")
          .attr("y", function (d) {
            return scaleY(d.value)   25;
          })
          .text(function (d) {
            return d3.format(".2")(d.value);
          });
      }
      
    </script>
  </body>
</html>

uj5u.com熱心網友回復：

首先我們需要一個刻度：

 var color = d3.scaleLinear().domain(scaleY.domain()).range(["lightgreen","crimson"])

現在我們需要在更新函式中更新拖動條的顏色：

 svgbrushY.selectAll(".selection").style("fill", function(d) { return color(d.value); })

這讓我們幾乎一路走到了那里——但最初的顏色并不正確。畫筆的創建會破壞 .selection 矩形的資料系結：如果您登錄

svgbrushY.selectAll(".selection").each(function(d) { console.log(d); })

您會注意到資料在被拖動之前沒有 value 屬性。所以我們可以自己添加它，并像我們在更新函式中一樣設定欄的樣式：

   svgbrushY.select(".selection")
     .datum(d=>d)
     .style("fill", function(d) { return color(d.value); })

這應該給我們類似的東西：

顯示代碼片段

<!DOCTYPE html>
<html>
  <style>
    .selection {
      fill-opacity: 1;
    }

    body {
      width: 80%;
      margin: auto;
    }
  </style>
  <body >
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script>
      var data = [
        { index: 0, value: 18 },
        { index: 1, value: 20 },
        { index: 2, value: 19 },
      ];

      var widthY = 550,
        heightY = 200,
        delim = 4;

      var scaleY = d3.scaleLinear().domain([0, 21]).rangeRound([heightY, 0]);

      var x = d3.scaleLinear().domain([0, data.length]).rangeRound([0, widthY]);
      
      var color = d3.scaleLinear().domain(scaleY.domain()).range(["lightgreen","crimson"])

      var svgY = d3
        .select("body")
        .append("svg")
        .attr("width", widthY)
        .attr("height", heightY)
        .attr("fill", "green")
        .append("g");

      var brushY = d3
        .brushY()
        .extent(function (d, i) {
          return [
            [x(i)   delim / 2, 0],
            [x(i)   x(1) - delim / 2, heightY],
          ];
        })
        .on("brush", brushmoveY)
        .on("end", brushendY);

      var svgbrushY = svgY
        .selectAll(".brush")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "brush")
        .append("g")
        .call(brushY)
        .call(brushY.move, function (d) {
          return [d.value, 0].map(scaleY);
        });
        
       svgbrushY.select(".selection")
         .datum(d=>d)
         .style("fill", function(d) { return color(d.value); })
        
       
       svgbrushY
        .append("text")
        .attr("y", function (d) {
          return scaleY(d.value)   25;
        })
        .attr("x", function (d, i) {
          return x(i)   x(0.5);
        })
        .attr("dx", "-.60em")
        .attr("dy", -5)
        .style("fill", "white")
        .text(function (d) {
          return d3.format(".2")(d.value);
        });

      function brushendY() {
        if (!d3.event.sourceEvent) return;
        if (d3.event.sourceEvent.type === "brush") return;
        if (!d3.event.selection) {
          svgbrushY.call(brushY.move, function (d) {
            return [d.value, 0].map(scaleY);
          });
        }
      }

      function brushmoveY() {
        if (!d3.event.sourceEvent) return;
        if (d3.event.sourceEvent.type === "brush") return;
        if (!d3.event.selection) return;

        var d0 = d3.event.selection.map(scaleY.invert);
        var d = d3.select(this).select(".selection");

        d.datum().value = d0[0];

        update();
      }
      
   

      function update() {
        svgbrushY
          .call(brushY.move, function (d) {
            return [d.value, 0].map(scaleY);
          })
          .selectAll("text")
          .attr("y", function (d) {
            return scaleY(d.value)   25;
          })
          .text(function (d) {
            return d3.format(".2")(d.value);
          });
   
           svgbrushY.selectAll(".selection").style("fill", function(d) { return color(d.value); })          
      }
      
    </script>
  </body>
</html>

（按比例縮小以查看片段視圖）

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/490956.html

標籤：javascript html css d3.js 图表

上一篇：即使出現“內部錯誤”，RestAPI也會回傳狀態代碼201

下一篇：從另一個陣列創建一個陣列