Question

我想尝试使d3图表可自定义，以便我可以直接通过UI更改字体和所有其他属性的颜色。这是可能的，如果是这样，我将如何完成这样的任务？再次感谢您的帮助。下面我只有一个静态树图，我希望能够通过UI / UX自定义它。

<!DOCTYPE html>
    <style>

    form {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    svg {
      font: 10px sans-serif;
    }

    </style>
     <div id="div1" class="container resizable draggable">
    <svg width="960" height="570"></svg>
    <form>
      <label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
      <label><input type="radio" name="mode" value="sumByCount"> Count</label>
    </form>


    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
         //Watches for div resize event (using ResizeSensor.js) and calls drawGraph() to redraw SVG
         var element = document.getElementById('div1');
         new ResizeSensor(element, function(element) {
           var chartWidth = $("#div1").width(),
             chartHeight = $("#div1").height();
           drawGraph(chartWidth, chartHeight)
         });

       </script>
    <script>

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
        color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
        format = d3.format(",d");

    var treemap = d3.treemap()
        .tile(d3.treemapResquarify)
        .size([width, height])
        .round(true)
        .paddingInner(1);

    d3.json("flare.json", function(error, data) {
      if (error) throw error;

      var root = d3.hierarchy(data)
          .eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
          .sum(sumBySize)
          .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

      treemap(root);

      var cell = svg.selectAll("g")
        .data(root.leaves())
        .enter().append("g")
          .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

      cell.append("rect")
          .attr("id", function(d) { return d.data.id; })
          .attr("width", function(d) { return d.x1 - d.x0; })
          .attr("height", function(d) { return d.y1 - d.y0; })
          .attr("fill", function(d) { return color(d.parent.data.id); });

      cell.append("clipPath")
          .attr("id", function(d) { return "clip-" + d.data.id; })
        .append("use")
          .attr("xlink:href", function(d) { return "#" + d.data.id; });

      cell.append("text")
          .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
        .selectAll("tspan")
          .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
        .enter().append("tspan")
          .attr("x", 4)
          .attr("y", function(d, i) { return 13 + i * 10; })
          .text(function(d) { return d; });

      cell.append("title")
          .text(function(d) { return d.data.id + "\n" + format(d.value); });

      d3.selectAll("input")
          .data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
          .on("change", changed);

      var timeout = d3.timeout(function() {
        d3.select("input[value=\"sumByCount\"]")
            .property("checked", true)
            .dispatch("change");
      }, 2000);

      function changed(sum) {
        timeout.stop();

        treemap(root.sum(sum));

        cell.transition()
            .duration(750)
            .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
          .select("rect")
            .attr("width", function(d) { return d.x1 - d.x0; })
            .attr("height", function(d) { return d.y1 - d.y0; });
      }
    });

    function sumByCount(d) {
      return d.children ? 0 : 1;
    }

    function sumBySize(d) {
      return d.size;
    }

    </script>

Answer 1

字体由svg元素的样式设置。

您可以通过设置该元素的样式来动态更新它：

document.querySelector('svg').style.font = '9px monospace'

颜色有点棘手。

您需要更新已实施的color功能，然后将其重新应用于元素：

color = d3.scaleOrdinal(['#fc0', '#08f', '#80f', '#f00'])

svg.selectAll("g")
   .select("rect")
   .attr("fill", function(d) { return color(d.parent.data.id); })

如何制作d3。图表可定制？

1 个答案: