D3.js总结

通用属性

  • fill：填充颜色

  • stroke：描边 / 边框颜色

  • stroke-width：边框粗细

  • opacity：透明度 0~1

<rect fill="skyblue" stroke="black" stroke-width="2" opacity="0.8"/>

矩形 rect

  • x：左上角横坐标

  • y：左上角纵坐标

  • width：宽度

  • height：高度

<rect x="50" y="50" width="100" height="60" fill="red"/>

圆形 circle

  • cx：圆心 x

  • cy：圆心 y

  • r：半径

<circle cx="100" cy="100" r="40" fill="green"/>

椭圆 ellipse

  • rx：水平半径

  • ry：垂直半径

<ellipse cx="150" cy="100" rx="50" ry="30" fill="orange"/>

直线 line

  • x1 y1：起点

  • x2 y2：终点

<line x1="20" y1="20" x2="200" y2="150" stroke="#333" stroke-width="3"/>

用 .datum() 绑定单个数据

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

<script>
  let text = "Polaris";

  d3.selectAll("p")
    .datum(text)
    .text(function (d, i) {
        return "Hello " + i + " " + d;
    });
</script>

用 .data() 绑定数组

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

<script>
  const dataset = ["I like dogs", "I like cats", "I like snakes"];
  d3.selectAll("p")
    .data(dataset)
    .text((d) => d);
</script>

插入元素

  • .append(tag)：在选择集的末尾追加新元素

  • .insert(tag, beforeSelector)：在指定元素的前面插入新元素

// 在 body 末尾追加一个 <p>
d3.select("body").append("p").text("我是 append 添加的段落");

// 在 #my-id 元素前面插入一个 <p>
d3.select("body").insert("p", "#my-id").text("我是 insert 添加的段落");

删除元素

  • .remove()：删除选择集中的所有元素

// 删除 id="my-id" 的元素
d3.select("#my-id").remove();

完整柱状图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>D3 v7 完整柱状图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
      .axis path, .axis line {
        fill: none;
        stroke: #333;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <script>
      // 1. 画布配置
      const width = 400;
      const height = 400;
      const padding = { top: 20, right: 20, bottom: 30, left: 40 };

      // 2. 创建 SVG
      const svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${padding.left},${padding.top})`);

      // 3. 数据
      const dataset = [10, 20, 30, 40, 33, 24, 12, 5];

      // 4. 比例尺
      const xScale = d3.scaleBand()
        .domain(d3.range(dataset.length))
        .range([0, width - padding.left - padding.right])
        .padding(0.1);

      const yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

      // 5. 坐标轴
      const xAxis = d3.axisBottom(xScale);
      const yAxis = d3.axisLeft(yScale);

      svg.append("g")
        .attr("class", "axis")
        .attr("transform", `translate(0,${height - padding.top - padding.bottom})`)
        .call(xAxis);

      svg.append("g")
        .attr("class", "axis")
        .call(yAxis);

      // 6. 绘制矩形
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => xScale(i))
        .attr("y", d => yScale(d))
        .attr("width", xScale.bandwidth())
        .attr("height", d => height - padding.top - padding.bottom - yScale(d))
        .attr("fill", "red");

      // 7. 文字标签
      svg.selectAll("text.label")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class", "label")
        .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
        .attr("y", d => yScale(d) - 5)
        .attr("text-anchor", "middle")
        .text(d => d);
    </script>
  </body>
</html>

D3.js总结
http://localhost:8090/archives/d3.jszong-jie
作者
Administrator
发布于
2026年01月08日
许可协议