D3.js 将svg用作D3和HTMLWidget的图标

我能够创建我的第一个htmlwidget来创建这个动画情节：

我想用一个使用svg作为图标的图标来替换“B”和“D”按钮。我特别想用。选中时图标应为黑色，未选中时图标应为浅灰色，悬停在上方时图标应为深灰色

首先，我不确定要将文件保存到哪里，以便我的代码可以看到它

这是我的htmlwidget包的yaml：

# (uncomment to add a dependency)
 dependencies:
  - name: D3
    version: 4
    src: htmlwidgets/lib/D3
    script: d3.v4.js
    stylesheet: style.css
  - name: d3tip
    version: 0.7.1
    src: htmlwidgets/lib/d3-tip
    script: d3-tip.min.js
    stylesheet: style.css

这是js文件：

HTMLWidgets.widget({

  name: 'IMPosterior',

  type: 'output',

  factory: function(el, width, height) {

    // TODO: define shared variables for this instance

    return {

      renderValue: function(opts) {

        //transition
        var transDuration = 1000;

        var dataDiscrete = opts.bars.map((b, i) => {
            b.y = Number(b.y);
            b.desc = opts.text[i];
            return b;
        });

        var distParams = {
            min: d3.min(opts.data, d => d.x),
            max: d3.max(opts.data, d => d.x)
        };

        distParams.cuts = [-opts.MME, opts.MME, distParams.max];

        opts.data = opts.data.sort((a,b) => a.x - b.x);

        var dataContinuousGroups = [];
        distParams.cuts.forEach((c, i) => {
            let data = opts.data.filter(d => {
                if (i === 0) {
                    return d.x < c;
                } else if (i === distParams.cuts.length - 1) {
                    return d.x > distParams.cuts[i - 1];
                } else {
                    return d.x < c && d.x > distParams.cuts[i - 1];
                }
            });

            data.unshift({x:data[0].x, y:0});
            data.push({x:data[data.length - 1].x, y:0});

            dataContinuousGroups.push({
                color: opts.colors[i],
                data: data
            });
        });

        var margin = {
                top: 50,
                right: 20,
                bottom: 80,
                left: 70
            },
            dims = {
                width: width - margin.left - margin.right,
                height: height - margin.top - margin.bottom
            };

        var xContinuous = d3.scaleLinear()
            .domain([distParams.min - 1, distParams.max + 1])
            .range([0, dims.width]);

        var xDiscrete = d3.scaleBand()
            .domain(dataDiscrete.map(function(d) { return d.x; }))
            .rangeRound([0, dims.width]).padding(0.1);

        var y = d3.scaleLinear()
            .domain([0, 1])
            .range([dims.height, 0]);

        var svg = d3.select(el).append("svg")
            .attr("width", dims.width + margin.left + margin.right)
            .attr("height", dims.height + margin.top + margin.bottom);

        var g = svg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var xAxis = d3.axisBottom()
            .scale(xDiscrete);

        var yAxis = d3.axisLeft()
            .scale(y)
            .ticks(10)
            .tickFormat(d3.format(".0%"));

        var yLabel = g.append("text")
            .attr("class", "y-axis-label")
            .attr("transform", "rotate(-90)")
            .attr("y", -52)
            .attr("x", -160)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .style("font-size", 14 + "px")
            .text("Probability");

        g.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + dims.height + ")")
            .call(xAxis);

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

        var areas = g.selectAll(".area")
            .data(dataDiscrete)
            .enter().append("path")
                .attr("class", "area")
                .style("fill", function(d) { return d.color; })
                .attr("d", function(d, i) {
                    let numPts = dataContinuousGroups[i].data.length - 2;
                    var path = d3.path()
                    path.moveTo(xDiscrete(d.x), y(0));
                    for (j=0; j<numPts; j++) {
                        path.lineTo(xDiscrete(d.x) + j*xDiscrete.bandwidth()/(numPts-1), y(d.y))
                    }
                    path.lineTo(xDiscrete(d.x) + xDiscrete.bandwidth(), y(0));
                    return path.toString();
                });

        var tooltip = d3.tip()
            .attr('class', 'd3-tip chart-data-tip')
            .offset([30, 0])
            .direction('s')
            .html(function(d, i) {
                return "<span>" + dataDiscrete[i].desc + "</span>";
            });

        g.call(tooltip);

        areas
            .on('mouseover', tooltip.show)
            .on('mouseout', tooltip.hide);

        var thresholdLine = g.append("line")
            .attr("stroke", "black")
            .style("stroke-width", "1.5px")
            .style("stroke-dasharray", "5,5")
            .style("opacity", 1)
            .attr("x1", 0)
            .attr("y1", y(opts.threshold))
            .attr("x2", dims.width)
            .attr("y2", y(opts.threshold));


        var updateXAxis = function(type, duration) {
            if (type === "continuous") {
                xAxis.scale(xContinuous);
            } else {
                xAxis.scale(xDiscrete);
            }
            d3.select(".x").transition().duration(duration).call(xAxis);       
        };

        var updateYAxis = function(data, duration) {
            var extent = d3.extent(data, function(d) {
                return d.y;
            });
            extent[0] = 0;
            extent[1] = extent[1] + 0.2*(extent[1] - extent[0]);
            y.domain(extent);
            d3.select(".y").transition().duration(duration).call(yAxis);
        };

        var toggle = function(to, duration) {
            if (to === "distribution") {
                updateYAxis(dataContinuousGroups[0].data.concat(dataContinuousGroups[1].data).concat(dataContinuousGroups[2].data), 0);
                updateXAxis("continuous", duration);

                areas
                    .data(dataContinuousGroups)
                    .transition()
                    .duration(duration)
                        .attr("d", function(d) {
                            var gen = d3.line()
                                .x(function(p) {
                                    return xContinuous(p.x);
                                })
                                .y(function(p) {
                                    return y(p.y);
                                });
                            return gen(d.data);
                        });

                thresholdLine
                    .style("opacity", 0);

                g.select(".y.axis")
                    .style("opacity", 0);

                g.select(".y-axis-label")
                    .style("opacity", 0);

            } else {
                y.domain([0, 1]);
                d3.select(".y").transition().duration(duration).call(yAxis);

                updateXAxis("discrete", duration);

                areas
                    .data(dataDiscrete)
                    .transition()
                    .duration(duration)
                        .attr("d", function(d, i) {
                            let numPts = dataContinuousGroups[i].data.length - 2;
                            var path = d3.path()
                            path.moveTo(xDiscrete(d.x), y(0));
                            for (j=0; j<numPts; j++) {
                                path.lineTo(xDiscrete(d.x) + j*xDiscrete.bandwidth()/(numPts-1), y(d.y))
                            }
                            path.lineTo(xDiscrete(d.x) + xDiscrete.bandwidth(), y(0));
                            return path.toString();
                        });

                thresholdLine
                    .transition()
                    .duration(0)
                    .delay(duration)
                        .style("opacity", 1)
                        .attr("y1", y(opts.threshold))
                        .attr("y2", y(opts.threshold));

                g.select(".y.axis")
                    .transition()
                    .duration(0)
                    .delay(duration)
                        .style("opacity", 1);

                g.select(".y-axis-label")
                    .transition()
                    .duration(0)
                    .delay(duration)
                        .style("opacity", 1);
            }
        };


        // Add buttons

        //container for all buttons
        var allButtons = svg.append("g")
          .attr("id", "allButtons");

        //fontawesome button labels
        var labels = ["B", "D"];

        //colors for different button states
        var defaultColor = "#E0E0E0";
        var hoverColor = "#808080";
        var pressedColor = "#000000";

        //groups for each button (which will hold a rect and text)
        var buttonGroups = allButtons.selectAll("g.button")
          .data(labels)
          .enter()
          .append("g")
          .attr("class", "button")
          .style("cursor", "pointer")
          .on("click", function(d, i) {
            updateButtonColors(d3.select(this), d3.select(this.parentNode));
            d3.select("#numberToggle").text(i + 1);
            if (d === "D") {
                toggle("distribution", transDuration);
            } else {
                toggle("discrete", transDuration);
            }

          })
          .on("mouseover", function() {
            if (d3.select(this).select("rect").attr("fill") != pressedColor) {
              d3.select(this)
                .select("rect")
                .attr("fill", hoverColor);
            }
          })
          .on("mouseout", function() {
            if (d3.select(this).select("rect").attr("fill") != pressedColor) {
              d3.select(this)
                .select("rect")
                .attr("fill", defaultColor);
            }
          });

        var bWidth = 40; //button width
        var bHeight = 25; //button height
        var bSpace = 10; //space between buttons
        var x0 = 20; //x offset
        var y0 = 10; //y offset

        //adding a rect to each toggle button group
        //rx and ry give the rect rounded corner
        buttonGroups.append("rect")
          .attr("class", "buttonRect")
          .attr("width", bWidth)
          .attr("height", bHeight)
          .attr("x", function(d, i) {
            return x0 + (bWidth + bSpace) * i;
          })
          .attr("y", y0)
          .attr("rx", 5) //rx and ry give the buttons rounded corners
          .attr("ry", 5)
          .attr("fill", defaultColor);

        //adding text to each toggle button group, centered
        //within the toggle button rect
        buttonGroups.append("text")
          .attr("class", "buttonText")
          .attr("x", function(d, i) {
            return x0 + (bWidth + bSpace) * i + bWidth / 2;
          })
          .attr("y", y0 + bHeight / 2)
          .attr("text-anchor", "middle")
          .attr("dominant-baseline", "central")
          .attr("fill", "white")
          .text(function(d) {
            return d;
          });

        function updateButtonColors(button, parent) {
          parent.selectAll("rect")
            .attr("fill", defaultColor);

          button.select("rect")
            .attr("fill", pressedColor);

        }

        toggle("distribution", 0);

        setTimeout(() => {
            toggle("discrete", transDuration);
        }, 1000);

      },



      resize: function(width, height) {

        // TODO: code to re-render the widget with a new size

      }

    };
  }
});

HTMLWidgets.widget({
名称：'冒名顶替者'，
类型：“输出”，
工厂：功能（el、宽度、高度）{
//TODO:为此实例定义共享变量
返回{
renderValue:函数（opts）{
//过渡
var-transDuration=1000；
var dataDiscrete=opts.bar.map（（b，i）=>{
b、 y=数量（b.y）；
b、 desc=选择文本[i]；
返回b；
});
变量distParams={
min:d3.min（选择数据，d=>d.x），
max:d3.max（opts.data，d=>d.x）
};
distParams.cuts=[-opts.MME，opts.MME，distParams.max]；
opts.data=opts.data.sort（（a，b）=>a.x-b.x）；
var dataContinuousGroups=[]；
distParams.cuts.forEach（（c，i）=>{
let data=opts.data.filter（d=>{
如果（i==0）{
返回d.xdistParams.cuts[i-1]；
}否则{
返回d.xdistParams.cuts[i-1]；
}
});
data.unshift（{x:data[0].x，y:0}）；
push（{x:data[data.length-1].x，y:0}）；
dataContinuousGroups.push({
颜色：选择颜色[i]，
数据：数据
});
});
var保证金={
前50名，
右:20,，
底部：80，
左：70
},
dims={
宽度：宽度-边距。左侧-边距。右侧，
高度：高度-边距.顶部-边距.底部
};
var xContinuous=d3.scaleLinear（）
.domain（[distParams.min-1，distParams.max+1]）
.范围（[0，dims.宽度]）；
var xDiscrete=d3.scaleBand（）
.domain（dataDiscrete.map（函数（d）{return d.x；}））
.rangeRound（[0，dims.width]）。填充（0.1）；
变量y=d3.scaleLinear（）
.domain（[0，1]）
.范围（[dims.高度，0]）；
var svg=d3.select（el）.append（“svg”）
.attr（“宽度”，dims.width+margin.left+margin.right）
.attr（“高度”，dims.height+margin.top+margin.bottom）；
var g=svg
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var xAxis=d3.axisBottom（）
.比例（xDiscrete）；
var yAxis=d3.axisLeft（）
.比例（y）
.滴答声（10）
.0%格式（d3.格式（“.0%”）；
var yLabel=g.append（“文本”）
.attr（“类”、“y轴标签”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，-52）
.attr（“x”，-160）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.style（“字体大小”，14+“px”）
.文本（“概率”）；
g、 附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0，+dims.height+”））
.呼叫（xAxis）；
g、 附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
变量区域=g.selectAll（“.area”）
.数据（数据离散）
.enter（）.append（“路径”）
.attr（“类别”、“区域”）
.style（“fill”，函数（d）{return d.color；}）
.attr（“d”，函数（d，i）{
设numPts=dataContinuousGroups[i].data.length-2；
var path=d3.path（）
moveTo（xDiscrete（d.x），y（0））；
对于（j=0；j来说，获取svg路径（在本例中为rect）并使用
svg.append（“defs”）
将其附加到svg可能是最简单和最独立的方法-无需从脚本访问任何图像文件。直接从文件插入svg会使操作更为复杂，例如，对
.attr（“fill”）进行着色
在这种情况下不起作用

在文本编辑器中打开图标，我们希望从图标中获取的数据为：

<path d="M37.92,42.22c3.78-8,7-14.95,12.08-14.95h0c5,0,8.3,6.93,12.08,14.95,6.12,13,13.73,29.13,33.48,29.13h0v-2h0c-18.48,0-25.79-15.51-31.67-28C59.82,32.74,56.3,25.28,50,25.28h0c-6.3,0-9.82,7.46-13.89,16.09-5.88,12.47-13.19,28-31.67,28h0v2h0C24.18,71.35,31.8,55.2,37.92,42.22Z"/>
<rect y="72.72" width="100" height="2"/>

要使用图标，我们只需将其附加为g元素的子元素（这也允许我们对其进行缩放，并且由于其宽度为100像素，因此可以轻松缩放到任何宽度：

svg.append("g")
   .attr("transform","scale(0.4)")
   .append("use")
   .attr("xlink:href","#bellcurve")

与任何其他svg元素一样，我们可以设置笔划、填充和笔划宽度属性。如果将笔划宽度设置为2以上，则可能不需要设置填充：笔划将重叠

下面是一个使用图标的快速演示，可以对其进行缩放和着色，为了好玩，还可以对其进行转换：


var svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，400）；
var symbol=svg.append（“defs”）
.附加（“g”）
.attr（“id”、“bellcurve”）；
symbol.append（“路径”）
7.7-7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 8 8 8 8 8 3 3 3 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 2,37.92,42.22Z）
symbol.append（“rect”）
.attr（“y”，72.72）
.attr（“宽度”，100）
.attr（“高度”，2）；
svg.append（“g”）
.append（“使用”）
.attr（“xlink:href”，“#bellcurve”）
.attr（“填充”、“钢蓝”）
.attr（“笔划”、“钢蓝”）
svg.append（“g”）
.attr（“变换”、“平移（100,0）比例（0.5）”）
.append（“使用”）
.attr（“xlink:href”，“#bellcurve”）
.attr（“填充”、“钢蓝”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，2）
svg.append（“g”）
.attr（“转换”、“转换”
svg.append("g")
   .attr("transform","scale(0.4)")
   .append("use")
   .attr("xlink:href","#bellcurve")