小编Gia*_*ian的帖子

我想创建一个条形图,使用字符串作为x轴上刻度线的标签(例如,1年级,2年级等,而不是0,1,2等).

我开始使用x轴的数值(例如,0,1,2,3等),如下所示:

1)我生成我的范围:

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .nice();

2)制作轴:

     d3.svg.axis()
        .scale(x);

3)重绘轴:

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

这适用于默认数字轴标签.

如果我尝试使用像这样的x tickValues的字符串数组....

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

...当我重绘图表时(对数据/设置进行更改或不进行更改),标签会像这样交换.

注意Col 1如何取代Col 0,反之亦然.

你知道为什么会这样吗？

每次我在输入字段中输入一个字符时,我都会解析表达式,以便得到:

1. 一系列标记,即tokenArray = [2,*,COS,(,4,)]
2. 相应的令牌类型数组,即tokenType = [NUMBER,OPERATOR,FUNCTION,(,NUMBER,)]

我需要根据各自的令牌类型设置每个令牌的样式(例如为每个令牌分配不同的颜色).

我已经能够轻松地将输入文本的动态副本设置为不同的<div>(不是输入文本本身,这是我要求的帮助),如下所示:

JavaScript的:

function processExpression() {
    var userInput = document.getElementById('inputText').value;

        var resultOutput =  parse(userInput); //this generates the two arrays described above

        for (i in tokenArray) 
          newHTML += "<span style='color: " + colorMap[ tokenType[i] ] + " '>" +  tokenArray[i] + "</span>";

          document.getElementById('styledExpression').innerHTML = newHTML; 
}

HTML:

<input type="text" id="inputText" value="" placeholder="Type expression" size="40"
        onKeyDown="processExpression();" 
        onKeyUp="processExpression();"/>

<div id="styledExpression" value=""></div>

如何直接在输入的输入字段中设置输入文本的样式？任何JavaScript解决方案？

UPDATE

蒂姆对这个问题的回答取代了可疑的div中的innerHTML,提供了一些很好的帮助.

你如何修改http://jsfiddle.net/2rTA5/2/以解决在每个keydown时,一个解析整个可编辑的问题？例如,假设你输入"= IF(AND(3 = 2,A1:A4,OR(0,1)),5,6)",并在每次的keydown的编辑被编程改写(见上令牌描述)我失去了光标. …

我很困惑.为什么通过简单地复制和粘贴示例http://bl.ocks.org/1153292箭头不对齐.(见下文)

更新:它适用于chrome和safai,但不适用于Firefox ......更令人费解.有任何想法吗？

在示例中你会改变什么来获得直线而不是曲线？

谢谢.