Создание пользовательской линейной диаграммы в D3.js

Question

Попытка создать пользовательскую линейную диаграмму, в которой есть только одна простая строка с градиентным фоном - фон каждой части строки определяется в соответствии с y-значением в эта точка (изменения в значениях гарантированно будут мягкими).

У меня возникли проблемы с базовой конфигурацией. Это мой код:

JS:

// General definitions 
var HEIGHT, MARGINS, WIDTH, formatDay, lineFunc, graph, graph_data, weekdays, x, xAxis, y, yAxis; 
WIDTH = 360; 
HEIGHT = 130; 
MARGINS = { 
    top: 20, 
    right: 30, 
    bottom: 20, 
    left: 20 
}; 

graph = d3.select("#graph"); 

// Define Axes 
weekdays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; 
formatDay = function(d) { 
    return weekdays[d % 6]; 
}; 

x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([ 
    d3.min(graph_data, function(d) { 
    return d.x; 
    }), d3.max(graph_data, function(d) { 
    return d.x + 1; 
    }) 
]); 

y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([ 
    d3.min(graph_data, function(d) { 
    return d.y; 
    }), d3.max(graph_data, function(d) { 
    return d.y; 
    }) 
]); 
xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(formatDay); 
yAxis = d3.svg.axis().scale(y).tickSize(10).orient("left"); 

// Line Function 
lineFunc = d3.svg.line().x(function(d) { 
    return x(d.x); 
}).y(function(d) { 
    return y(d.y); 
}).interpolate("basis"); 

// Define Line Gradient 
graph.append("linearGradient").attr("id", "line-gradient").attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", y(0)).attr("x2", 0).attr("y2", y(200)).selectAll("stop").data([ 
    { 
    offset: "0%", 
    color: "#F0A794" 
    }, { 
    offset: "20%", 
    color: "#F0A794" 
    }, { 
    offset: "20%", 
    color: "#E6A36A" 
    }, { 
    offset: "40%", 
    color: "#E6A36A" 
    }, { 
    offset: "40%", 
    color: "#CE9BD2" 
    }, { 
    offset: "62%", 
    color: "#CE9BD2" 
    }, { 
    offset: "62%", 
    color: "#AA96EE" 
    }, { 
    offset: "82%", 
    color: "#AA96EE" 
    }, { 
    offset: "82%", 
    color: "#689BE7" 
    }, { 
    offset: "90%", 
    color: "#689BE7" 
    }, { 
    offset: "90%", 
    color: "1AA1DF" 
    }, { 
    offset: "100%", 
    color: "1AA1DF" 
    } 
]).enter().append("stop").attr("offset", function(d) { 
    return d.offset; 
}).attr("stop-color", function(d) { 
    return d.color; 
}); 

// Draw Line 
graph.append("svg:path").attr("d", lineFunc(graph_data)); 

// Draw Axes 
graph.append("svg:g").attr("class", "x axis").attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")").call(xAxis); 
graph.append("svg:g").attr("class", "y axis").attr("transform", "translate(" + MARGINS.left + ",0)").call(yAxis); 

стиль

#line-gradient { 
    fill: none; 
    stroke: url(#line-gradient); 
    stroke-width: 7px; 
    stroke-linejoin: "round"; 
} 

Выборочные данные

graph_data = [{ 
    x: 1, 
    y: 22 
}, { 
    x: 2, 
    y: 20 
}, { 
    x: 3, 
    y: 10 
}, { 
    x: 4, 
    y: 40 
}, { 
    x: 5, 
    y: 5 
}, { 
    x: 6, 
    y: 30 
}, { 
    x: 7, 
    y: 60 
}] 

Что Я получаю выглядит так:

Может ли из вас специалисты D3.js скажите мне, что я делаю неправильно, и что нужно изменить для того, чтобы моей линии, чтобы линия, а не область, имеющая описанный выше градиент фона линии, и круглые края?

Большое спасибо заранее!

Answer 1

Вот скрипка: http://jsfiddle.net/henbox/gu4y7fk8/

Вы должны дать path имя класса, например:

graph.append("svg:path") 
    .attr("class","chartpath") 
    .attr("d", lineFunc(graph_data)); 

И тогда CSS стиль вы должны должен быть на этом path элемента, а не lineargradient элемента

.chartpath { /*note: not #line-gradient*/ 
    fill: none; 
    stroke: url(#line-gradient); 
    stroke-width: 7px; 
    stroke-linejoin: "round"; 
} 

Я также устроились несколько других вещей:

1. Отсутствует # на пару цветовых кодов, так что изменяется (color: "1AA1DF" к color: "#1AA1DF"
2. Я изменил максимальное значение Y для градиента от 200 до 60, так что изменение цвета градиент линии больше видно в примере (.attr("y2", y(200)) к .attr("y2", y(60)))