C3js - 如何更改左下角图例的宽度

Question

我想更改图例的大小，因为在使用左下角的位置插图后，我的图例元素在元素之间没有相同的 space：

https://user-images.githubusercontent.com/9460795/58431609-d9e77400-80ae-11e9-97c6-9efbd89bd558.png

我已经尝试更改条形宽度但没有任何反应

legend: { position: 'inset', padding: 10, inset: { anchor: 'bottom-left', x: -5, y: -50 - (20 * (this.selectedData.length - 2)), step: 1 }, item: { onmouseover: (id) => this.mouseOverLegendItem(id), onmouseout: (id) => this.mouseOutLegendItem(id), onclick: (id) => this.onmouseClickLegendItem(id) } }, bar: { width: 30 },

请问我该如何解决？我是 c3 的新手，抱歉 :(

C3版本："^0.6.13", D3 版本：“^5.9.1”

Answer 1

不幸的是，当图例的类型为 'inset' 时，这个固定宽度似乎被嵌入到定位代码中。如果您希望图例水平显示且项目之间没有额外间距，则必须将图例位置设置为 'bottom'.

如果你这样做的话，你可以将底部的图例移动到图表区域以模仿插图，但它相当脆弱 - 参见 https://jsfiddle.net/5odf8w0x/

var chart = c3.generate({
    data: {
        columns: [
            ['data1ytuytuytutyuu', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 10, 20, 30, 40, 60, 70]
        ]
    },
    legend: {
        position: 'bottom'
    },
    onrendered: function () {
        console.log(this, this.config);
        var x = +d3.select(this.config.bindto).select(".c3-legend-item text").attr("x");
        x -= 70; // for axis and margin
        d3.select(this.config.bindto).selectAll(".c3-legend-item").attr("transform", "translate(-"+x+",-50)");
    }
});

C3js - 如何更改左下角图例的宽度

C3js - How to change the width of a bottom-left legend

c3.js