Возможно ли подписчивание в SVG?

Я нарисовал гистограмму, используя dimple.js. Я должен показать ярлыки yaxis и xaxis lables с индексом. Можно ли показать индекс в svg. Если да, то дайте мне знать, как достичь подписки в 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)

В этом я должен SO2 с 2, как нижний индекс. Пожалуйста, дайте мне знать, как это сделать.

источник

2015-10-10 Keshav1007

См http://www.svgbasics.com/font_effects_italic.html –

@Lars Kotthoff - Я.И. увидели эту ссылку, но они написаны с помощью простых svg/html-тегов, но в моем случае данные, которые у меня есть, находятся в форме json .. когда я дал , он отображается, как не с индексом .. – Keshav1007

не поддерживается широко, поскольку свойство SVG CSS конфликтует со стандартным CSS. Я ожидаю, что SVG2 предложит другое решение. –

Вот быстрый взлом. После того, как ваш график рисуется сделать:

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') 
 
\t .attr('transform', label.attr('transform')) 
 
\t .attr('style', label.attr('style')) 
 
\t .attr('x', +label.attr('x') + 6) 
 
\t .attr('y', label.attr('y') - 5) 
 
\t .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>

источник

2015-10-10 17:41:12 Mark

Возможно ли подписчивание в SVG?

ответ

Смежные вопросы