Question

我有一个TreeMap布局，并想知道如何根据它们的值控制子矩形的不透明度？但理想情况下，我希望每个孩子都有特定的填充，这样观众就能够直观地看到哪个城市的癌症患者比另一个城市的百分比高，而不是自己创造一个传奇。目前，整个TreeMap设置为一种颜色。

很抱歉提前直接输入代码中的数据，我还在学习基础知识。

干杯

    <!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            },
            {
              "name": "CKD",
              "value": 3.21,
              "color": "#2F9599",
            },
            {
              "name": "CHD",
              "value": 2.57,
              "color": "#E8175D",
            },
            {
              "name": "Diabetes",
              "value": 11.92,
              "color": "#474747",
            },
            {
              "name": "Stroke",
              "value": 1.18,
              "color": "#CC527A",
            }
          ]
        },
        {
        "name": "Leeds",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.52,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.29,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.71,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.82,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Liverpool",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 5.90,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.71,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.70,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.88,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Manchester",
        "children": [
          {
            "name": "Cancer",
            "value": 1.78,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 2.95,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.61,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.05,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Sheffield",
        "children": [
          {
            "name": "Cancer",
            "value": 2.54,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 4.57,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.85,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.08,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
    ]
  },
  {
    "name": "South England",
    "children": [
      {
        "name": "Brighton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Bristol",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Luton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Milton Keynes",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color":"#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Southampton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      ]
    }
  ]
};

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

  nodes
    .append('rect')
    .attr('width', function(d) { return d.x1 - d.x0; })
    .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('opacity', function(d) { return 0.8 /* has to be like d.value / max or so */ })
    .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }})
  nodes
    .append('text')
    .attr('dx', 10)
    .attr('dy', 8)
        .text(function(d) {
      return d.data.value;
  });


  </script>
</body>

Answer 1

您可以简单地指定不透明度属性，例如宽度或高度。只需返回一个函数并决定如何将您的值映射到百分比范围（实际上您需要知道您的最大值）。

.attr（'opacity'，function（d）{return d.value / 10}）

在你的代码中，这意味着这样的事情：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pack layout (with labels)</title>
</head>

<style>
rect {
  stroke: white;
}
text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  fill: black;
  font-size: 8px;
  text-anchor: end;
}


svg {
  padding-left: 60px;
  padding-top: 40px;
}
</style>

<body>
  <svg width="1020" height="720">
    <g></g>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "North England",
  "children": [
    {
      "name": "Bradford City",
      "children": [
        {
          "name": "Cancer",
          "value": 1.18,
          "color": "red",
        },
        {
          "name": "CKD",
          "value": 3.21,
          "color": "green",
        },
        {
          "name": "CHD",
          "value": 2.57,
          "color": "blue",
        },
        {
          "name": "Diabetes",
          "value": 11.92,
          "color": "yellow",
        },
        {
          "name": "Strokes",
          "value": 1.18,
          "color": "gray",
        }
      ]
    },
  ]
};

var treemapLayout = d3.treemap()
  .size([600, 400])
  .paddingOuter(20);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

  nodes
    .append('rect')
    .attr('width', function(d) { return d.x1 - d.x0; })
    .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('opacity', function(d) { return 0.5 /* has to be like d.value / max or so */ })
    .attr('fill', function(d) { if (d.data.color) { 
                                  return d.data.color 
                                } else {
                                  return "white"
                                }})

  nodes
    .append('text')
    .attr('dx', 4)
    .attr('dy', 14)
		.text(function(d) {
      return d.data.name;
  });
  

  </script>
</body>

更新：

    <!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            },
            {
              "name": "CKD",
              "value": 3.21,
              "color": "#2F9599",
            },
            {
              "name": "CHD",
              "value": 2.57,
              "color": "#E8175D",
            },
            {
              "name": "Diabetes",
              "value": 11.92,
              "color": "#474747",
            },
            {
              "name": "Stroke",
              "value": 1.18,
              "color": "#CC527A",
            }
          ]
        },
        {
        "name": "Leeds",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.52,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.29,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.71,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.82,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Liverpool",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 5.90,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.71,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.70,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.88,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Manchester",
        "children": [
          {
            "name": "Cancer",
            "value": 1.78,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 2.95,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.61,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.05,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Sheffield",
        "children": [
          {
            "name": "Cancer",
            "value": 2.54,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 4.57,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.85,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.08,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
    ]
  },
  {
    "name": "South England",
    "children": [
      {
        "name": "Brighton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Bristol",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Luton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Milton Keynes",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color":"#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Southampton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      ]
    }
  ]
};

var maxValues = {
                "Cancer": 2.54,
                "CKD": 5.9,
                "CHD": 3.85,
                "Diabetes": 12,
                "Stroke": 2.13,
                }

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

  nodes
    .append('rect')
    .attr('width', function(d) { return d.x1 - d.x0; })
    .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('opacity', function(d) { return d.value / maxValues[d.data.name] })
    .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }})
  nodes
    .append('text')
    .attr('dx', 10)
    .attr('dy', 8)
        .text(function(d) {
      return d.data.value;
  });


  </script>
</body>

值控制的颜色不透明度

1 个答案: