Question

我有一张用c3.js制作的图表。我正在尝试用d3.js更改类别的文本。我真实示例中的这些文本是来自Web服务的动态文本。当我更新文本时，您无法很好地阅读文本，因为文本的宽度仍然是以前的文本。如何修改文本的宽度以使它们适应新文本并便于阅读？

var chart = c3.generate({
    data: {
        xs: {
            category1: 'category1_x',
            category2: 'category2_x',
            category3: 'category3_x',
            category4: 'category4_x',
            category5: 'category5_x',
            category6: 'category6_x',
            category7: 'category7_x',
            category8: 'category8_x',

        },
        // iris data from R
        columns: [
            ["category1_x", 3.5],
            ["category2_x", 3.2],
            ["category3_x", 3.2],
            ["category4_x", 3.2],
            ["category5_x", 3.2],
            ["category6_x", 3.2],
            ["category7_x", 3.2],
            ["category8_x", 3.2],

            ["category1", 0.2],
            ["category2", 1.4],
            ["category3", 1.4],
            ["category4", 1.4],
            ["category5", 1.4],
            ["category6", 1.4],
            ["category7", 1.4],
            ["category8", 1.4]

        ],
        type: 'scatter'
    },
    axis: {
        x: {
            label: 'Sepal.Width',
            tick: {
                fit: false
            }
        },
        y: {
            label: 'Petal.Width'
        }
    }
});


 var array=
 ["la categoria 1","es muy diveritda","vamos ","sera que","funciona", "la ","pendejada ","es","ojala si","dsadada"
 ]

d3.selectAll(".c3-legend-item text").each(function(d,i){

      d3.select(this).text(array[i]);

})

https://jsfiddle.net/zvdruskg/

Answer 1

为什么要在绘图后更新文字？如果您正确准备数据，问题就会消失。

如果您必须在生成图表后调用它，请使用chart.load：

<!DOCTYPE html>
<html>

<head>
  <link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" />
  <script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script>
    var chart = c3.generate({
      data: {
        xs: {
          category1: 'category1_x',
          category2: 'category2_x',
          category3: 'category3_x',
          category4: 'category4_x',
          category5: 'category5_x',
          category6: 'category6_x',
          category7: 'category7_x',
          category8: 'category8_x',

        },
        // iris data from R
        columns: [
          ["category1_x", 3.5],
          ["category2_x", 3.2],
          ["category3_x", 3.2],
          ["category4_x", 3.2],
          ["category5_x", 3.2],
          ["category6_x", 3.2],
          ["category7_x", 3.2],
          ["category8_x", 3.2],

          ["category1", 0.2],
          ["category2", 1.4],
          ["category3", 1.4],
          ["category4", 1.4],
          ["category5", 1.4],
          ["category6", 1.4],
          ["category7", 1.4],
          ["category8", 1.4]

        ],
        type: 'scatter'
      },
      axis: {
        x: {
          label: 'Sepal.Width',
          tick: {
            fit: false
          }
        },
        y: {
          label: 'Petal.Width'
        }
      }
    });

    setTimeout(() => {
      chart.load({
        names: {
          category1: 'la categoria 1',
          category2: 'es muy diveritda',
          category3: 'vamos',
          category4: 'sera que',
          category5: 'funciona',
          category6: 'la',
          category7: 'pendejada',
          category8: 'es'
        }
      })
    }, 500);
  </script>
</body>

</html>

如何修改图例中文本的宽度？

1 个答案: