D3js水平条形图：如何在每个条形末尾从数据中添加数字？

Question

我有这段代码，可以绘制条形图。我试图将对应值放在小节内，但在每个小节的末尾。我还没能做到。你能帮我吗？任何建议将不胜感激。

我将保留一个运行片段，以便您可以看到它，并告诉从哪里开始将值放置在柱的末尾但仍在其中。

 $(window).on('resize', function (event) {
            $("#chart").width(window.innerWidth * 0.9);
            $("#chart").height(window.innerHeight);
        });     
        
        
	function horizontalGroupBarChart(config) {
            function setReSizeEvent(data) {
                var resizeTimer;
                var interval = 500;
                window.removeEventListener('resize', function () {
                });
                window.addEventListener('resize', function (event) {
                    if (resizeTimer !== false) {
                        clearTimeout(resizeTimer);
                    }
                    resizeTimer = setTimeout(function () {
                        $(data.mainDiv).empty();
                        drawHorizontalGroupBarChartChart(data);
                        clearTimeout(resizeTimer);
                    }, interval);
                });
            }

            drawHorizontalGroupBarChartChart(config);
            setReSizeEvent(config);
        }
        function createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange) {
            var z = d3.scaleOrdinal()
                .range(colorRange);
            var mainDivName = mainDiv.substr(1, mainDiv.length);
            $(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-top:0; margin-bottom:0;text-align:center'></div>");
            var keys = Object.keys(columnsInfo);
            keys.forEach(function (d) {
                var cloloCode = z(d);
                $("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
  			<span style='background:" + cloloCode + ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'>&nbsp;</span>\
  			<span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + columnsInfo[d] + " </span>\
  		</span>");
            });

        }

        function drawHorizontalGroupBarChartChart(config) {
            var data = config.data;
            var columnsInfo = config.columnsInfo;
            var xAxis = config.xAxis;
            var yAxis = config.yAxis;
            var colorRange = config.colorRange;
            var mainDiv = config.mainDiv;
            var mainDivName = mainDiv.substr(1, mainDiv.length);
            var label = config.label;
            var requireLegend = config.requireLegend;
			
            d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height() * 0.80).attr("class","mainSVG")
            var svg = d3.select(mainDiv + " svg"),
                margin = { top: 20, right: 20, bottom: 40, left: 40 },
                width = +svg.attr("width") - margin.left - margin.right,
                height = +svg.attr("height") - margin.top - margin.bottom;


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

            if (requireLegend != null && requireLegend != undefined && requireLegend != false) {
                $("#Legend_" + mainDivName).remove();
                createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange);
            }
			
			$(".mainSVG").attr("transform","translate(5,10)")


            var y0 = d3.scaleBand()
                .rangeRound([height, 0])
                .paddingInner(0.1);


            var y1 = d3.scaleBand()
                .padding(0.05);


            var x = d3.scaleLinear()
                .rangeRound([0, width - margin.left ]);


            var z = d3.scaleOrdinal()
                .range(colorRange);

            var keys = Object.keys(columnsInfo);
            y0.domain(data.map(function (d) {
                return d[yAxis];
            }));
            y1.domain(keys).rangeRound([0, y0.bandwidth()]);
            x.domain([0, d3.max(data, function (d) {
                return d3.max(keys, function (key) {
                    return d[key];
                });
            })]).nice();
            var maxTicks = d3.max(data, function (d) {
                return d3.max(keys, function (key) {
                    return d[key];
                });
            });
            var element = g.append("g")
                .selectAll("g")
                .data(data)
                .enter().append("g")
                .attr("transform", function (d) {
                    return "translate(0," + y0(d[yAxis]) + ")";
                });
            var rect = element.selectAll("rect")
                .data(function (d, i) {
                    return keys.map(function (key) {
                        return { key: key, value: d[key], index: key + "_" + i + "_" + d[yAxis] };
                    });
                })
                .enter().append("rect")
                .attr("y", function (d) {
                    return y1(d.key);
                })
                .attr("width", function (d) {
                    return x(d.value);
                })
                .attr("data-index", function (d, i) {
                    return d.index;
                })
                .attr("height", y1.bandwidth())
                .attr("fill", function (d) {
                    return z(d.key);
                })
			
			
			
				var datax = [0,1,2,3,4,5,6,7,8,9,10,11,12];
			
			
            var tScale= d3.scaleLinear()
                .rangeRound([0, width - margin.left ]);

           
            tScale.domain(d3.extent(datax)).nice();
           
			
			
			
				
            //CBT:add tooltips
            var self = {};
            self.svg = svg;
            self.cssPrefix = "horgroupBar0_";
            self.data = data;
            self.keys = keys;
            self.height = height;
            self.width = width;
            self.label = label;
            self.yAxis = yAxis;
            self.xAxis = xAxis;
            horBarTooltip.addTooltips(self);

            rect.on("mouseover", function () {
                var currentEl = d3.select(this);
                var index = currentEl.attr("data-index");
                horBarTooltip.showTooltip(self, index);
            });

            rect.on("mouseout", function () {
                var currentEl = d3.select(this);
                var index = currentEl.attr("data-index");
                horBarTooltip.hideTooltip(self, index);
            });

            rect.on("mousemove", function () {
                horBarTooltip.moveTooltip(self);
            });


            g.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x).ticks(maxTicks))
                .append("text")
                .attr("x", width / 2)
                .attr("y", margin.bottom * 0.7)
                .attr("dx", "0.32em")
                .attr("fill", "#000")
                .attr("font-weight", "bold")
			
                .attr("text-anchor", "start")
               

            g.append("g")
                .attr("class", "axis")
                .call(d3.axisLeft(y0).ticks(null, "s"))
                .append("text")
                .attr("x", height * 0.4 * -1)
                .attr("y", margin.left * 0.8 * -1)//y(y.ticks().pop()) + 0.5)
                .attr("dy", "0.71em")
                .attr("fill", "#00338D")
              
                .attr("font-weight", "bold")
                // .attr("text-anchor", "start")
              

        }
        var helpers = {
            getDimensions: function (id) {
                var el = document.getElementById(id);
                var w = 0, h = 0;
                if (el) {
                    var dimensions = el.getBBox();
                    w = dimensions.width;
                    h = dimensions.height;
                } else {
                    console.log("error: getDimensions() " + id + " not found.");
                }
                return { w: w, h: h };
            }
        }
        var horBarTooltip = {
            addTooltips: function (pie) {
                var keys = pie.keys;
                // group the label groups (label, percentage, value) into a single element for simpler positioning
                var element = pie.svg.append("g")
                    .selectAll("g")
                    .data(pie.data)
                    .enter().append("g")
                    .attr("class", function (d, i) {
                        return pie.cssPrefix + "tooltips" + "_" + i
                    });

                tooltips = element.selectAll("g")
                    .data(function (d, i) {
                        return keys.map(function (key) {
                            return { key: key, value: d[key], index: key + "_" + i + "_" + d[pie.yAxis] };
                        });
                    })
                    .enter()
                    .append("g")
                    .attr("class", pie.cssPrefix + "tooltip")
                    .attr("id", function (d, i) {
                        return pie.cssPrefix + "tooltip" + d.index;
                    })
                    .style("opacity", 0)
                    .append("rect")
                    .attr("rx", 2)
                    .attr("ry", 2)
                    .attr("x", -2)
                    .attr("opacity", 0.71)
                    .style("fill", "#000000");

                element.selectAll("g")
                    .data(function (d, i) {
                        return keys.map(function (key) {
                            return { key: key, value: d[key], index: key + "_" + i + "_" + d[pie.yAxis] };
                        });
                    })
                    .append("text")
                    .attr("fill", function (d) {
                        return "#efefef"
                    })
                    .style("font-size", function (d) {
                        return 10;
                    })
                    .style("font-family", function (d) {
                        return "arial";
                    })
                    .text(function (d, i) {
                        var caption = "" + pie.label.xAxis + ":{value}";

                        return horBarTooltip.replacePlaceholders(pie, caption, i, {
                            value: d.value,
                        });
                    });

                element.selectAll("g rect")
                    .attr("width", function (d, i) {
                        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
                        return dims.w + (2 * 4);
                    })
                    .attr("height", function (d, i) {
                        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
                        return dims.h + (2 * 4);
                    })
                    .attr("y", function (d, i) {
                        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
                        return -(dims.h / 2) + 1;
                    });
            },

            showTooltip: function (pie, index) {
                var fadeInSpeed = 250;
                if (horBarTooltip.currentTooltip === index) {
                    fadeInSpeed = 1;
                }

                horBarTooltip.currentTooltip = index;
                d3.select("#" + pie.cssPrefix + "tooltip" + index)
                    .transition()
                    .duration(fadeInSpeed)
                    .style("opacity", function () {
                        return 1;
                    });

                horBarTooltip.moveTooltip(pie);
            },

            moveTooltip: function (pie) {
                d3.selectAll("#" + pie.cssPrefix + "tooltip" + horBarTooltip.currentTooltip)
                    .attr("transform", function (d) {
                        var mouseCoords = d3.mouse(this.parentNode);
                        var x = mouseCoords[0] + 4 + 2;
                        var y = mouseCoords[1] - (2 * 4) - 2;
                        return "translate(" + x + "," + y + ")";
                    });
            },

            hideTooltip: function (pie, index) {
                d3.select("#" + pie.cssPrefix + "tooltip" + index)
                    .style("opacity", function () {
                        return 0;
                    });

                // move the tooltip offscreen. This ensures that when the user next mouseovers the segment the hidden
                // element won't interfere
                d3.select("#" + pie.cssPrefix + "tooltip" + horBarTooltip.currentTooltip)
                    .attr("transform", function (d, i) {
                        // klutzy, but it accounts for tooltip padding which could push it onscreen
                        var x = pie.width + 1000;
                        var y = pie.height + 1000;
                        return "translate(" + x + "," + y + ")";
                    });
            },

            replacePlaceholders: function (pie, str, index, replacements) {
                var replacer = function () {
                    return function (match) {
                        var placeholder = arguments[1];
                        if (replacements.hasOwnProperty(placeholder)) {
                            return replacements[arguments[1]];
                        } else {
                            return arguments[0];
                        }
                    };
                };
                return str.replace(/\{(\w+)\}/g, replacer(replacements));
            }
        };
	
	
	
    var groupChartData = [{ "num": 1, "over": "Singapore" }, { "num": 1.3, "over": "The Netherlands" }, { "num": 2, "over": "United Kingdom" }, { "num": 2.4, "over": "United States"}, { "num": 2.6, "over": "New Zealand" }, { "num": 2.8, "over": "Sweden" }, { "num": 3, "over": "Canada"}, { "num": 3, "over": "UAE" }, { "num": 4, "over": "Australia" }, { "num": 4.4, "over": "France" },{ "num": 5, "over": "South Korea" },{ "num": 5.2, "over": "Germany" },{ "num": 5.5, "over": "Austria" },{ "num": 6, "over": "Austria" },{ "num": 7, "over": "Brazil" },{ "num": 7, "over": "China" },{ "num": 8, "over": "Japan" },{ "num": 10, "over": "Russia" },{ "num": 11, "over": "Mexico" },{ "num": 12, "over": "India" },];
    var columnsInfo = { "num": "<span class='mainTitle KPMGWeb-ExtraLight'>Technology & innovation pillar: score by country</span>" };

    $("#chart").empty();
    var barChartConfig = {
        mainDiv: "#chart",
        colorRange: ["#0091DA", "#6D2077"],
        data: groupChartData,
        columnsInfo: columnsInfo,
        xAxis: "runs",
        yAxis: "over",
        label: {
            xAxis: "",
            yAxis: ""
        },
        requireLegend: true
    };
    var groupChart = new horizontalGroupBarChart(barChartConfig);

		.mainTitle{
			
			font-size: 3em;
		}

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart" style="width: 800;height: 600">

非常感谢您！

Answer 1

听起来您几乎已经在添加标签了。您想将它们添加到保存g条形的rect元素中，并在rect之后 之后添加它们，以便它们出现在条形顶部，所以：

  var element = g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) {
      return "translate(0," + y0(d[yAxis]) + ")";
    });

  var rect = element.selectAll("rect")
    .data(function(d, i) {
      return keys.map(function(key) {
        return {
          key: key,
          value: d[key],
          index: key + "_" + i + "_" + d[yAxis]
        };
      });
    })
    .enter().append("rect")
    .attr("width", function (d) {
      return x(d.value);
    })

    [ etc. ]

  // add the text elements
  element.append('text')

text元素必须位于小节的末尾，并且使用绑定到x(d.value)元素的数据，小节的宽度为rect。根据您已经附加到d.value元素的数据，d.num转换为g，因此我们可以将x属性设置为x(d.num)。如果text-anchor设置为end，将使文本的结尾与条的结尾对齐；我们希望在文本和条形结尾之间留一点空间，所以要添加一个小的偏移量：

element.append('text')
 .attr('text-anchor', 'end')
 .attr('x', d => x(d.num) - 5)

栏中显示的值也将是d.num，因此我们可以添加：

element.append('text')
 .attr('text-anchor', 'end')
 .attr('x', d => x(d.num) - 5)
 .text(d => d.num )

如果现在运行代码，您会发现数字被上面的条形部分遮住了，因此让我们整理一下y偏移量。条形宽度为y1.bandwidth()；要将文本的基线与条形底部对齐，请添加

element.append('text')
 .attr('text-anchor', 'end')
 .attr('x', d => x(d.num) - 5)
 .attr('y', y1.bandwidth())
 .text(d => d.num )

根据您希望用户查看图表的大小，您可能希望尝试将文本居中放置在条形上方-例如尝试

element.append('text')
 .attr('text-anchor', 'end')
 .attr('x', d => x(d.num) - 5)
 .attr('y', y1.bandwidth()/2)
 .attr('dy', '0.25em')
 .text(d => d.num )

这是一个可行的示例：

$(window).on('resize', function(event) {
  $("#chart").width(window.innerWidth * 0.9);
  $("#chart").height(window.innerHeight);
});


function horizontalGroupBarChart(config) {
  function setReSizeEvent(data) {
    var resizeTimer;
    var interval = 500;
    window.removeEventListener('resize', function() {});
    window.addEventListener('resize', function(event) {
      if (resizeTimer !== false) {
        clearTimeout(resizeTimer);
      }
      resizeTimer = setTimeout(function() {
        $(data.mainDiv).empty();
        drawHorizontalGroupBarChartChart(data);
        clearTimeout(resizeTimer);
      }, interval);
    });
  }

  drawHorizontalGroupBarChartChart(config);
  setReSizeEvent(config);
}

function createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange) {
  var z = d3.scaleOrdinal()
    .range(colorRange);
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  $(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-top:0; margin-bottom:0;text-align:center'></div>");
  var keys = Object.keys(columnsInfo);
  keys.forEach(function(d) {
    var cloloCode = z(d);
    $("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
  			<span style='background:" + cloloCode + ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'>&nbsp;</span>\
  			<span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + columnsInfo[d] + " </span>\
  		</span>");
  });

}

function drawHorizontalGroupBarChartChart(config) {
  var data = config.data;
  var columnsInfo = config.columnsInfo;
  var xAxis = config.xAxis;
  var yAxis = config.yAxis;
  var colorRange = config.colorRange;
  var mainDiv = config.mainDiv;
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  var label = config.label;
  var requireLegend = config.requireLegend;

  d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height() * 0.80).attr("class", "mainSVG")
  var svg = d3.select(mainDiv + " svg"),
    margin = {
      top: 20,
      right: 20,
      bottom: 40,
      left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;


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

  if (requireLegend != null && requireLegend != undefined && requireLegend != false) {
    $("#Legend_" + mainDivName).remove();
    createhorizontalGroupBarChartLegend(mainDiv, columnsInfo, colorRange);
  }

  $(".mainSVG").attr("transform", "translate(5,10)")


  var y0 = d3.scaleBand()
    .rangeRound([height, 0])
    .paddingInner(0.1);


  var y1 = d3.scaleBand()
    .padding(0.05);


  var x = d3.scaleLinear()
    .rangeRound([0, width - margin.left]);


  var z = d3.scaleOrdinal()
    .range(colorRange);

  var keys = Object.keys(columnsInfo);
  y0.domain(data.map(function(d) {
    return d[yAxis];
  }));
  y1.domain(keys).rangeRound([0, y0.bandwidth()]);
  x.domain([0, d3.max(data, function(d) {
    return d3.max(keys, function(key) {
      return d[key];
    });
  })]).nice();
  var maxTicks = d3.max(data, function(d) {
    return d3.max(keys, function(key) {
      return d[key];
    });
  });
  var element = g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) {
      return "translate(0," + y0(d[yAxis]) + ")";
    });
     
  var rect = element.selectAll("rect")
    .data(function(d, i) {
      return keys.map(function(key) {
        return {
          key: key,
          value: d[key],
          index: key + "_" + i + "_" + d[yAxis]
        };
      });
    })
    .enter().append("rect")
    .attr("y", function(d) {
      return y1(d.key);
    })
    .attr("width", function(d) {
      return x(d.value);
    })
    .attr("data-index", function(d, i) {
      return d.index;
    })
    .attr("height", y1.bandwidth())
    .attr("fill", function(d) {
      return z(d.key);
    })


   element.append('text')
     .attr('x', d => x(d.num) - 5)
     .attr('y', y1.bandwidth()/2)
     .attr('dy', '0.35em')
     .attr('text-anchor', 'end')
     .text(d => d.num )

  var datax = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];


  var tScale = d3.scaleLinear()
    .rangeRound([0, width - margin.left]);


  tScale.domain(d3.extent(datax)).nice();





  //CBT:add tooltips
  var self = {};
  self.svg = svg;
  self.cssPrefix = "horgroupBar0_";
  self.data = data;
  self.keys = keys;
  self.height = height;
  self.width = width;
  self.label = label;
  self.yAxis = yAxis;
  self.xAxis = xAxis;
  horBarTooltip.addTooltips(self);

  rect.on("mouseover", function() {
    var currentEl = d3.select(this);
    var index = currentEl.attr("data-index");
    horBarTooltip.showTooltip(self, index);
  });

  rect.on("mouseout", function() {
    var currentEl = d3.select(this);
    var index = currentEl.attr("data-index");
    horBarTooltip.hideTooltip(self, index);
  });

  rect.on("mousemove", function() {
    horBarTooltip.moveTooltip(self);
  });


  g.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(maxTicks))
    .append("text")
    .attr("x", width / 2)
    .attr("y", margin.bottom * 0.7)
    .attr("dx", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")

    .attr("text-anchor", "start")


  g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y0).ticks(null, "s"))
    .append("text")
    .attr("x", height * 0.4 * -1)
    .attr("y", margin.left * 0.8 * -1) //y(y.ticks().pop()) + 0.5)
    .attr("dy", "0.71em")
    .attr("fill", "#00338D")

    .attr("font-weight", "bold")
  // .attr("text-anchor", "start")


}
var helpers = {
  getDimensions: function(id) {
    var el = document.getElementById(id);
    var w = 0,
      h = 0;
    if (el) {
      var dimensions = el.getBBox();
      w = dimensions.width;
      h = dimensions.height;
    } else {
      console.log("error: getDimensions() " + id + " not found.");
    }
    return {
      w: w,
      h: h
    };
  }
}
var horBarTooltip = {
  addTooltips: function(pie) {
    var keys = pie.keys;
    // group the label groups (label, percentage, value) into a single element for simpler positioning
    var element = pie.svg.append("g")
      .selectAll("g")
      .data(pie.data)
      .enter().append("g")
      .attr("class", function(d, i) {
        return pie.cssPrefix + "tooltips" + "_" + i
      });

    tooltips = element.selectAll("g")
      .data(function(d, i) {
        return keys.map(function(key) {
          return {
            key: key,
            value: d[key],
            index: key + "_" + i + "_" + d[pie.yAxis]
          };
        });
      })
      .enter()
      .append("g")
      .attr("class", pie.cssPrefix + "tooltip")
      .attr("id", function(d, i) {
        return pie.cssPrefix + "tooltip" + d.index;
      })
      .style("opacity", 0)
      .append("rect")
      .attr("rx", 2)
      .attr("ry", 2)
      .attr("x", -2)
      .attr("opacity", 0.71)
      .style("fill", "#000000");

    element.selectAll("g")
      .data(function(d, i) {
        return keys.map(function(key) {
          return {
            key: key,
            value: d[key],
            index: key + "_" + i + "_" + d[pie.yAxis]
          };
        });
      })
      .append("text")
      .attr("fill", function(d) {
        return "#efefef"
      })
      .style("font-size", function(d) {
        return 10;
      })
      .style("font-family", function(d) {
        return "arial";
      })
      .text(function(d, i) {
        var caption = "" + pie.label.xAxis + ":{value}";

        return horBarTooltip.replacePlaceholders(pie, caption, i, {
          value: d.value,
        });
      });

    element.selectAll("g rect")
      .attr("width", function(d, i) {
        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
        return dims.w + (2 * 4);
      })
      .attr("height", function(d, i) {
        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
        return dims.h + (2 * 4);
      })
      .attr("y", function(d, i) {
        var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + d.index);
        return -(dims.h / 2) + 1;
      });
  },

  showTooltip: function(pie, index) {
    var fadeInSpeed = 250;
    if (horBarTooltip.currentTooltip === index) {
      fadeInSpeed = 1;
    }

    horBarTooltip.currentTooltip = index;
    d3.select("#" + pie.cssPrefix + "tooltip" + index)
      .transition()
      .duration(fadeInSpeed)
      .style("opacity", function() {
        return 1;
      });

    horBarTooltip.moveTooltip(pie);
  },

  moveTooltip: function(pie) {
    d3.selectAll("#" + pie.cssPrefix + "tooltip" + horBarTooltip.currentTooltip)
      .attr("transform", function(d) {
        var mouseCoords = d3.mouse(this.parentNode);
        var x = mouseCoords[0] + 4 + 2;
        var y = mouseCoords[1] - (2 * 4) - 2;
        return "translate(" + x + "," + y + ")";
      });
  },

  hideTooltip: function(pie, index) {
    d3.select("#" + pie.cssPrefix + "tooltip" + index)
      .style("opacity", function() {
        return 0;
      });

    // move the tooltip offscreen. This ensures that when the user next mouseovers the segment the hidden
    // element won't interfere
    d3.select("#" + pie.cssPrefix + "tooltip" + horBarTooltip.currentTooltip)
      .attr("transform", function(d, i) {
        // klutzy, but it accounts for tooltip padding which could push it onscreen
        var x = pie.width + 1000;
        var y = pie.height + 1000;
        return "translate(" + x + "," + y + ")";
      });
  },

  replacePlaceholders: function(pie, str, index, replacements) {
    var replacer = function() {
      return function(match) {
        var placeholder = arguments[1];
        if (replacements.hasOwnProperty(placeholder)) {
          return replacements[arguments[1]];
        } else {
          return arguments[0];
        }
      };
    };
    return str.replace(/\{(\w+)\}/g, replacer(replacements));
  }
};



var groupChartData = [{
  "num": 1,
  "over": "Singapore"
}, {
  "num": 1.3,
  "over": "The Netherlands"
}, {
  "num": 2,
  "over": "United Kingdom"
}, {
  "num": 2.4,
  "over": "United States"
}, {
  "num": 2.6,
  "over": "New Zealand"
}, {
  "num": 2.8,
  "over": "Sweden"
}, {
  "num": 3,
  "over": "Canada"
}, {
  "num": 3,
  "over": "UAE"
}, {
  "num": 4,
  "over": "Australia"
}, {
  "num": 4.4,
  "over": "France"
}, {
  "num": 5,
  "over": "South Korea"
}, {
  "num": 5.2,
  "over": "Germany"
}, {
  "num": 5.5,
  "over": "Austria"
}, {
  "num": 6,
  "over": "Austria"
}, {
  "num": 7,
  "over": "Brazil"
}, {
  "num": 7,
  "over": "China"
}, {
  "num": 8,
  "over": "Japan"
}, {
  "num": 10,
  "over": "Russia"
}, {
  "num": 11,
  "over": "Mexico"
}, {
  "num": 12,
  "over": "India"
}, ];
var columnsInfo = {
  "num": "<span class='mainTitle KPMGWeb-ExtraLight'>Technology & innovation pillar: score by country</span>"
};

$("#chart").empty();
var barChartConfig = {
  mainDiv: "#chart",
  colorRange: ["#0091DA", "#6D2077"],
  data: groupChartData,
  columnsInfo: columnsInfo,
  xAxis: "runs",
  yAxis: "over",
  label: {
    xAxis: "",
    yAxis: ""
  },
  requireLegend: true
};
var groupChart = new horizontalGroupBarChart(barChartConfig);

.mainTitle {
  font-size: 3em;
}
svg text {
  font-size: 10px;
  font-family: sans-serif;
}

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart" style="width: 800;height: 600">

顺便说一句，我注意到奥地利似乎在同一条线上有两个小节-不确定那是不是故意的。