javascript - How do you make text different classes on the same line in d3.js? -

i want style different parts of text on same line in different ways. i'd assign items values array different class items percentages array while still drawing them on same line, i'm not sure how. right have:

var labels = svg.selectall(".labels").data(values).enter(); labels.append("text")     .attr("class", "labels")     .text(function (d, i) {         var labeltext = values[i] + " (" + percentages[i] + "%)";         return labeltext;     })     .attr("x", function (d, i) {         return labelxleft;     })     .attr("y", function (d, i) {         return labelybottom;     }); 

how assign values[i] class valueslabels , percentages[i] class percentagelabels while still drawing percentage text right after values text? don't want try calculate width of values text because font isn't monospace.