Question

我对C3 Javascript库有疑问。

我有一个条形图，它有一个组，因此它显示为带有多种颜色段的条形图。当我用黑白打印时，我试图让它看起来很漂亮，而我的同事们不想修改配色方案，所以我的下一个想法是在条形的每个段之间添加大约2个像素的间距。

我已经搜遍了所有的C3示例，堆栈溢出，并且在过去的五六天里我自己尝试了一堆3D技巧，我真的被这个问题困住了。

我尝试过的一些事情是将变换/样式应用于创建图形片段的实际路径元素。到目前为止，我所尝试的样式，如边距或填充都没有得到尊重，我认为这可能只是我读过的路径元素的本质，而且我已经能够获得翻译和缩放受到尊重，但在获得我想要的结果时遇到问题：

随着比例尺的变化，元素全部粉碎在一起，它们不会在页面上保留它们的实际尺寸，因此它只会使整体图形变小（而不是缩放）。通过翻译，我想我可以使用D3 .each并为每个片段使用不同的翻译，但是它们一起显然不起作用，因为它们都移动了。我只是在寻找一个优雅的解决方案，但如果没有更好的方法，我愿意花时间来解决这个问题。到目前为止，我找不到D3或C3解决方案是不成功的。

我并不太关心数据表示的轻微失真（即将每个元素缩小2个像素而不考虑其他元素的大小，因为它实际上只是一个相对/近似的可视化。

    this._graph = c3.generate({
        bindto: '#graph',
        size: {
            height: 280
        },
        data: {
            x: 'comparisons',
            rows: graphData,
            type: 'bar',
            groups: [
                ['time1','time2','time3']
            ],
            colors: {
                'color1': this._green,
                'color2': this._pink,
                'color3': this._blue
            },
            labels: false,  //use to remove data labels
            order: null
        },
        transition: {
            duration: 0
        },
        onresized: function() {
            d3.selectAll("#graph .c3-texts .c3-text").each(function() {
                d3.select(this).style('fill', 'black');
            });
        },
        axis: {
            x: {
                type: 'category',
                tick: {
                    outer: false,
                    centered: true
                }
            }, 
            y: {
                show: false
            }
        },
        bar: {
            width: {
                ratio: 0.75
            }
        },
        legend: {
            position: 'bottom'
        },
        tooltip: {
            show: false
        },
        transition: {
            duration: 0
        }
    });

This is what the graph looks like approximately.

正如我所说，我能够找到的唯一解决方案是使用D3选择路径元素并应用一个在父上下文中引用变量的函数并应用增量转换每次翻译，但显然不是理想的方式。

我为我的无知而提前道歉，我更多的是C ++和裸机开发人员，我对JavaScript非常陌生。

谢谢， -R

C3分组条形图间隙

0 个答案: