Я использую функцию d3.svg.symbol() для отображения символов на моей линейной диаграмме.Создайте генератор символов с D3.js
Я написал это code, но ничего не происходит.
Часть для создания символов является:
svg.selectAll("path")
.data(donnees)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + xScale(d.xValue) + "," + yScale(d.yValue) + ")"; })
.attr("d", d3.svg.symbol());
Во-первых, позволяет говорить о ваших данных. У вас есть объект с ключом и структурой значений. Вы дали d3 что-то он может работать с итерацией вашего объекта, как:
for (var i in donnees) {
svg.append("path")
...
В то время как это работает, мы можем сделать лучше. Скажем, мы пробуем:
var data = d3.entries(donnees);
, которая возвращает:
[Object ,Object ,Object]
key: "Cbio" key: "Cres"
value: Array[10] value: Array[10]
Сейчас мы говорим о каких-то данных d3 действительно нравится. Таким образом, это позволит переписать чертеж вашей линии.
Во-первых, создать группу для каждой строки:
var lineGroup = svg.selectAll(".line")
.data(data)
.enter()
.append("g")
.attr("class", "line");
Теперь все пути строки:
lineGroup
.append("path")
.attr("d", function(d){
return line(d.value);
})
.attr("fill", "none")
.attr("stroke", function(d,i){
return colors(i);
})
.attr("stroke-width", 1);
И, наконец, позволяет сделать некоторые символы:
var types = ["circle","cross","diamond"];
lineGroup
.selectAll("symbol")
.data(function(d){
return d.value; //<-- this is a subselection, and allows you to build a symbol for each datapoint of your line
})
.enter()
.append("path")
.attr("transform", function(d) {
return "translate(" + xScale(d.xValue) + "," + yScale(d.yValue) + ")";
})
.attr("d", function(d,i,j){ //<-- the j here is the parent selection, each lineGroup
return d3.svg.symbol()
.type(types[j])(d); //<-- fancy up our symbols
})
.attr("fill", function(d,i,j){
return colors(j);
});
Полный код:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script>
var w = 500,
h = 400,
padding = 30;
var donnees = {
"Cbio": [{
"xValue": 1,
"yValue": 21
}, {
"xValue": 20,
"yValue": 150
}, {
"xValue": 40,
"yValue": 200
}, {
"xValue": 60,
"yValue": 150
}, {
"xValue": 80,
"yValue": 125
}, {
"xValue": 100,
"yValue": 100
}, {
"xValue": 120,
"yValue": 90
}, {
"xValue": 140,
"yValue": 80
}, {
"xValue": 160,
"yValue": 80
}, {
"xValue": 180,
"yValue": 40
}],
"Cres": [{
"xValue": 1,
"yValue": 350
}, {
"xValue": 20,
"yValue": 30
}, {
"xValue": 40,
"yValue": 20
}, {
"xValue": 60,
"yValue": 30
}, {
"xValue": 80,
"yValue": 30
}, {
"xValue": 100,
"yValue": 30
}, {
"xValue": 120,
"yValue": 20
}, {
"xValue": 140,
"yValue": 30
}, {
"xValue": 160,
"yValue": 30
}, {
"xValue": 180,
"yValue": 30
}],
"tsol84": [{
"xValue": 1,
"yValue": 10
}, {
"xValue": 20,
"yValue": 15
}, {
"xValue": 40,
"yValue": 20
}, {
"xValue": 60,
"yValue": 25
}, {
"xValue": 80,
"yValue": 30
}, {
"xValue": 100,
"yValue": 25
}, {
"xValue": 120,
"yValue": 25
}, {
"xValue": 140,
"yValue": 25
}, {
"xValue": 160,
"yValue": 30
}, {
"xValue": 180,
"yValue": 25
}]
};
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var data = d3.entries(donnees);
var xScale = d3.scale.linear()
.domain([0,
d3.max(d3.max(data, function(d) {
return d.value;
}), function(d){
return d.xValue;
})
])
.range([padding, w - padding]);
var yScale = d3.scale.linear()
.domain([0, d3.max(d3.max(data, function(d) {
return d.value;
}), function(d){
return d.yValue;
})
])
.range([h - padding, padding]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
var line = d3.svg.line()
.x(function(d) {
return xScale(d.xValue)
})
.y(function(d) {
return yScale(d.yValue)
});
var colors = d3.scale.category20();
var lineGroup = svg.selectAll(".line")
.data(data)
.enter()
.append("g")
.attr("class", "line");
lineGroup
.append("path")
.attr("d", function(d){
return line(d.value);
})
.attr("fill", "none")
.attr("stroke", function(d,i){
return colors(i);
})
.attr("stroke-width", 1);
var types = ["circle","cross","diamond"];
lineGroup
.selectAll("symbol")
.data(function(d){
return d.value;
})
.enter()
.append("path")
.attr("transform", function(d) {
return "translate(" + xScale(d.xValue) + "," + yScale(d.yValue) + ")";
})
.attr("d", function(d,i,j){
return d3.svg.symbol()
.type(types[j])(d);
})
.attr("fill", function(d,i,j){
return colors(j);
});
</script>
</body>
</html>Спасибо! Я ценю, что вы нашли время, чтобы помочь мне. –
Вы уверены, что вы связали правильный код? Я не вижу ссылки на 'd3.svg.symbol' в [связанном JSFiddle] (https://jsfiddle.net/adeun9wp/4/). – Anko
Пожалуйста, взгляните на последнюю строку кода –
Wow, odd, он не отображается в поиске Ctrl + F. Прошу прощения за путаницу. – Anko