Question

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

小提琴 - 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)

在此我必须以2作为下标的SO2。请让我知道如何做到这一点。

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>

是否可以在SVG中进行订阅？

1 个答案: