Разрыв линии в C3 сгенерированной SVG-диаграмме через JavaScript

мне нужна помощь по генерации разрыва строки в html.

в JavaScript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html возвращает, как показано ниже

<div>jan <br> 2015</div>

ожидаемый результат: мне нужен разрыв строки в HTML, но не должна делать <br> тег.

обновление: Я хочу "января" в первой строке и следующей строке "2015"

Я использую эти значения в диаграмме c3 x ценности.

JSFIDDLE

спасибо заранее.

7
c3.js html javascript

4 ответов

ваш вопрос заявление было немного неточным: вы используете C3.js, который будет производить элемент svg.

таким образом, возвращенная разметка была фактически <tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan>.

C3 будет использовать textContent свойство tspan для добавления текстового содержимого, возвращаемого вашей функцией.
Как уже сказано в другие вопросы, вы не можете добавить разрыв строки в <tspan> элементы.

таким образом, решение эффективно для создания нового tspan как раз под другой, в той же самой <text> элемент.

к сожалению, нет никакого способа получить эти точные элементы, кроме как зацикливаясь через все другие tspans, так что это может звучать как настоящий хак, но вот сценарий, который будет делать то, что вы хотите...

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};


var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet">
<div id="chart"></div>
5

вам нужно создать новый <tspan> для каждой новой строки. Причина в том, что <tspan> обычно находится внутри <text> элемент. Который имеет определенные координаты. Вы не можете идти "против" этих координат.

единственное, что вы можете сделать, это создать еще один <tspan> с различным набором координат и положение его, как вам нравится.

поскольку текстовые элементы SVG отображаются с использованием тех же методов рендеринга, что и остальные графические элементы SVG, те же координировать системные преобразования. ,.. и т. д. Также применяются.

текстовый элемент SVG отображает первый символ в начале текущая позиция текста.

эта позиция определяется атрибутами " x " и " y " текста SVG Элемент.

внутри <text> свойства элемента, текста и шрифта и текущий текст положение можно отрегулировать с абсолютными или относительными значениями координаты включив <tspan> элемент.

1

возможно, это то, что вам нужно: 

var calculate= '<pre>' + x + '\n' + y + '</pre>';

вы должны поместить все это в предварительные теги, которые \n интерпретируется как разрыв строки.

о программе:http://www.sitepoint.com/everything-need-know-html-pre-element/

демо на CodePen:http://codepen.io/mizech/pen/gPOrEz

-1

Я пробовал следующий код в ABC.html и он работает.пожалуйста, попробуйте.

    <!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var x = "jun";
var y = "2015";
document.getElementById("demo").innerHTML =x+"<br>"+y;
</script>
</body>
</html>
-1