Question

I have a line chart and the full array of data is attached to the line. I want to change from using the value column to the pct (percent) column in the data. Is there a way of doing this in place, ie. using the values already in the DOM without passing it a new set of data?

as far as I’ve got – http://bl.ocks.org/3099307

var width = 700,   // width of svg
        height = 400,  // height of svg
        padding = 100; // space around the chart, not including labels

var data=[{"date":new Date(2012,0,1), "value": 3, 'pct': 55},
    {"date":new Date(2012,0,3), "value": 2, "pct": 30      },
    {"date":new Date(2012,0,12), "value": 33, "pct": 10},
    {"date":new Date(2012,0,21), "value": 13, "pct": 29},
    {"date":new Date(2012,0,30), "value": 23, "pct": 22}];


var x_domain = d3.extent(data, function(d) {
            return d.date; }),
        y_domain = d3.extent(data, function(d) { return d.value; });

// define the y scale  (vertical)
var yScale = d3.scale.linear()
        .domain(y_domain)
        .range([height - padding, padding]);   // map these top and bottom of the chart


var xScale =  d3.time.scale()
        .domain(x_domain)
        .range([padding, width - padding]);   // map these sides of the chart, in this case 100 and 600

// define the y axis
var yAxis = d3.svg.axis()
        .orient("left")
        .scale(yScale);

// define the x axis
var xAxis = d3.svg.axis()
        .orient("bottom")
        .scale(xScale);



// create the svg

var div = d3.select("body");

div.select("svg").remove();


var vis = div.append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + padding + "," + padding + ")");






// draw y axis with labels and move in from the size by the amount of padding
vis.append("g")
        .attr("class", "axis yaxis")
        .attr("transform", "translate("+padding+",0)")
        .call(yAxis);

// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (height - padding) + ")")
        .call(xAxis);



// DRAW LINES

var line = d3.svg.line()
        .x(function(d) {
            return xScale(d.date); })
        .y(function(d) {
            return yScale(d.value); })
        .interpolate("basis");

vis.selectAll(".lines")
        .data([data])
        .enter()
        .append("svg:path")
        .attr("d", line)
        .attr("class", "lines");


function rescale() {
    // change the y axis to show percentage

    yScale.domain([0,100])  // redraw as percentage outstanding
    vis.select(".yaxis")
            .transition().duration(1500).ease("sin-in-out")  // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
            .call(yAxis);

What happens here?

    // now redraw the line to use pct
    line.y(function(d) {
                return yScale(d.pct); });

     vis.selectAll("lines")
                .transition()
                .duration(500)
                .ease("linear");
}

Answer 1

Your data is already joined, so you just need to update your selection:

var yPctScale = d3.scale.linear()
    .domain([0, 100])
    .range([height - padding, padding]);

var pct_line =  d3.svg.line()
    .x(function(d) {
        return xScale(d.date); })
    .y(function(d) {
        return yPctScale(d.pct); })
    .interpolate("basis");

vis.selectAll(".lines")
    .transition().duration(1500).ease("sin-in-out")
    .attr("d", pct_line);