1. Adding Rounded Corners to Rectangles #

Since your context is C3.js (which uses SVG under the hood), I’ll cover both SVG rectangles and standard HTML rectangles to cover all bases:

For SVG Rectangles (like those in C3 charts) #

SVG rectangles use the rx and ry attributes to define rounded corners. You can adjust these directly, via D3, or even CSS:

• Inline SVG: Add the attributes directly to the element:

  <rect x="10" y="10" width="100" height="50" rx="10" ry="10" fill="blue" />
  

• Using D3 (for C3-generated elements): After your chart renders, target the rects and update their attributes:

  d3.selectAll(".c3-legend-item rect") // Adjust selector for other rects in your chart
    .attr("rx", 5)
    .attr("ry", 5);
  

• Using CSS: Modern browsers support border-radius for SVG elements too:

  .c3-legend-item rect {
    border-radius: 5px;
  }
  

For HTML Div Rectangles #

Use CSS border-radius to round the corners of any HTML div:

.rectangle {
  width: 100px;
  height: 50px;
  background: blue;
  border-radius: 10px; /* Increase/decrease for more/less rounding */
}

2. Changing C3.js Legend from Rectangles to Circles #

C3.js generates legends with <rect> elements by default, but since it’s built on D3.js, we can easily modify these to circles. Here are two straightforward methods:

Method 1: Replace Rects with Circles After Chart Render #

After generating your chart, use D3 to swap out the legend rectangles for circles. Integrate this with your existing code like so:

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 30],
      ['data2', 120],
    ],
    type : 'donut',
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); },
    label:true,
  },
  donut: {
    title: "Iris Petal Width",
    label: { /* your label configuration here */ }
  }
});

// Modify legend to use circles once the chart is rendered
chart.on('rendered', function() {
  d3.selectAll('.c3-legend-item rect').each(function() {
    const rect = d3.select(this);
    const parent = rect.node().parentNode;
    // Grab position, size, and color from the original rect
    const x = parseFloat(rect.attr('x'));
    const y = parseFloat(rect.attr('y'));
    const width = parseFloat(rect.attr('width'));
    const height = parseFloat(rect.attr('height'));
    const fill = rect.attr('fill');

    // Create a circle centered over the original rect
    d3.select(parent)
      .append('circle')
      .attr('cx', x + width/2)
      .attr('cy', y + height/2)
      .attr('r', Math.min(width, height)/2) // Match the rect's size
      .attr('fill', fill);

    // Remove the original rectangle
    rect.remove();
  });
});

Method 2: Style Rects to Look Like Circles (Simpler) #

If you don’t want to replace elements, you can turn the square legend rects into circles by setting their rx and ry attributes to half their width:

chart.on('rendered', function() {
  d3.selectAll('.c3-legend-item rect').each(function() {
    const rect = d3.select(this);
    const size = parseFloat(rect.attr('width')); // C3's default legend rects are square
    rect.attr('rx', size/2)
        .attr('ry', size/2);
  });
});

This works because setting rx and ry to half the width of a square turns it into a perfect circle.

Using the rendered event ensures our code runs after the chart finishes loading, so we don’t try to modify elements that haven’t been created yet.

内容的提问来源于stack exchange，提问作者yavg