搜索
搜索

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

Julio Rodriguez 发表于 Dev
44
胡里奥·罗德里格斯

我有这个代码，可以画一个条形图。我试图将对应的值放在条形内，但放在每个条形的最后。我一直无法完成它。你能帮我解决这个问题吗？任何建议将不胜感激。

我将留下一个运行片段，以便您可以看到它并告诉从哪里开始将值放置在条形的末端但在它的内部。

 $(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">

非常感谢你！

我惊动了外星人

听起来您几乎就可以添加标签了。您想将它们添加到g包含rect条形的元素中，并将它们添加到s之后，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')

文本元素需要在栏的末尾，栏的宽度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">

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

添加数据集条形图-Chart.JS

堆积条形图D3js

d3js堆积的条形图未更新

条形图的条形图之间的d3js网格线

在条形图d3js旁边添加计数

将文本追加到d3js v4中的分组条形图

如何在分组的条形图d3js v4中减小矩形大小

D3.js水平条形图和json文件中的数据

Dimple.js-将数据标签添加到条形图的每个条形

d3.js条形图将新数据添加到条形图上，

d3js遮罩以在条形图上显示点

当添加更多条时，d3js 负和正条形图会失去对齐

d3 v4如何在条形图中添加数据标签

D3JS在一定时间范围内的堆叠条形图

堆积的条形图无法正确更新d3js

d3js分组条形图切换图例

d3js 滚动可见性 - 条形图的系列动画

d3js v5调整大小分组条形图

d3js v4重叠条形图

d3js v5 x轴条形图

d3js 分组条形图，这可能吗？

如何使用json数据在d3.js中创建垂直分组的条形图？

如何在 d3js 中向条形字符添加垂直线？

破碎的 D3js 和弦图

d3js json饼图

d3.js水平条形图问题

d3 js双向水平条形图

D3.js 水平旋转/绘制条形图

D3js数据格式

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档