javascript - 是否可以在 SVG 中进行下标？

Question

我使用dimple.js绘制了一个条形图。我必须显示带有下标的 yaxis 标签和 xaxis 标签。是否可以在 svg 中显示下标。如果是，请告诉我如何在 svg 中实现下标。

fiddle -http://jsfiddle.net/keshav_1007/utfnLaz6/3/

var yMax = 1.2;
var svg1 = dimple.newSvg("body", 360, 360);
var dataChart = [{
    "Brand": "Aaaaaaaaaaaaaaaaaaaaaa",
        "Day": "Mon",
        "SO2": 10
}, {
    "Brand": "Bbbbbbbbbbbbbbbbbbbb",
        "Day": "Mon",
        "SO2": 20
},
                {
    "Brand": "Ccccccccccccccccc",
        "Day": "Mon",
        "SO2": 20
}];
var myChart = new dimple.chart(svg1, dataChart);
myChart.setBounds(120, 10, 200, 200)
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addMeasureAxis("y", "SO2");
y.ticks = 5;
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap = 0.7;
myChart.draw();
console.log(y._tick_step)

在此我必须将 SO2 与 2 作为下标。请让我知道该怎么做。

Answer 1

这是一个快速技巧。绘制绘图后，执行以下操作:

var label = d3.select('.dimple-title.dimple-axis-y') //<-- find the axis label
d3.select(label.node().parentNode) //<-- add a new text with the subscript 2
    .append('text')
    .attr('transform', label.attr('transform'))
    .attr('style', label.attr('style'))
    .attr('x', +label.attr('x') + 6)
    .attr('y', label.attr('y') - 5)
    .text('2');

完整代码:

var yMax = 1.2;
var svg1 = dimple.newSvg("body", 360, 360);
var dataChart = [{
    "Brand": "Aaaaaaaaaaaaaaaaaaaaaa",
        "Day": "Mon",
        "SO": 10
}, {
    "Brand": "Bbbbbbbbbbbbbbbbbbbb",
        "Day": "Mon",
        "SO": 20
},
                {
    "Brand": "Ccccccccccccccccc",
        "Day": "Mon",
        "SO": 20
}];
var myChart = new dimple.chart(svg1, dataChart);
myChart.setBounds(120, 10, 200, 200)
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addMeasureAxis("y", "SO");
y.ticks = 5;
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap = 0.7;
myChart.draw();
console.log(y._tick_step)

var label = d3.select('.dimple-title.dimple-axis-y')
d3.select(label.node().parentNode)
    .append('text')
	.attr('transform', label.attr('transform'))
	.attr('style', label.attr('style'))
	.attr('x', +label.attr('x') + 6)
	.attr('y', label.attr('y') - 5)
	.text('2');

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.1.6/dimple.latest.min.js"></script>