d3 показывает метки только для тиков с данными в гистограмме
Во-первых, я новичок в D3. :) У меня есть гистограмма с накоплением. Моя ось Y - это порядковый масштаб (штат). По моим данным, у меня может быть общее значение = 0 для некоторых тиков. Итак, я просто хочу увидеть метки, когда сумма> 0, но сохранить все отметки данных.
var data = [{ "state":"A", "total":"10"},
{ "state":"B", "total":"0"},
{ "state":"C", "total":"0"},
{ "state":"D", "total":"20"},
{ "state":"E", "total":"0"},
{ "state":"F", "total":"50"}]
Я пробовал этот код, но он удаляет все галочки с total = 0. Я просто хочу удалить метку этого галочки.
yAxis.tickValues(dataSet.map( function(d,i)
{
if (d.total > 0)
return d.state;
else
if(i % 4 === 0 ) return d.state;
})
.filter(function (d)
{ return !!d; } ));
Спасибо филипе
ОБНОВИТЬ Вот код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="ocks-org do-not-copy">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="timeLine"></div>
<!--style>
svg {
font: 10px sans-serif;
}
path {
fill: steelblue;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var timeline;
var labels;
var margin = {
top : 20,
right : 10,
bottom : 60,
left : 80
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.rangeRound([0, width]);
var y = d3.scale.ordinal()
.rangeBands([height, 0], 0.1);
var color = d3.scale.ordinal()
.range(["#1f77b4", "#2ca02c", "#E53524"]);
//var color = d3.scale.category10()
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.format(".2s"))
.ticks(10);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
timeline = d3.select("#timeLine").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var dataSet;
var all_nodes_t;
var all_updates_t;
var test;
var entity = "ALL";
dataSet = [
{ "Date":"2014-01", "insert":"27", "remove":"17","updates":"427"},
{ "Date":"2014-02", "insert":"27", "remove":"17","updates":"427"},
{ "Date":"2014-03", "insert":"27", "remove":"17","updates":"427"},
{ "Date":"2014-04", "insert":"0", "remove":"0","updates":"0"},
{ "Date":"2014-05", "insert":"27", "remove":"17","updates":"427"},
];
color.domain(d3.keys(dataSet[0]).filter(function (key) {
retu,rn key !== "Date";
}));
dataSet.forEach(function (d) {
var x0 = 0;
d.ages = color.domain().map(function (name) {
return {
name : name,
x0 : x0,
x1 : x0 += +d[name]
};
});
d.total = d.ages[d.ages.length - 1].x1;
});
//HERE
yAxis.tickFormat(dataSet.map(function(d) {
d.total == 0 ? "" : d.Date;
}));
y.domain(dataSet.map(function (d) {
return d.Date;
}));
x.domain([0, d3.max(dataSet, function (d) {
return (d.total + 5);
})]);
timeline.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 1)
.attr("dx", "42em")
.attr("dy", "3em")
.style("text-anchor", "end")
.text("Operations");
timeline.append("g")
.attr("class", "y axis")
.call(yAxis);
var layer = timeline.selectAll(".state")
.data(dataSet)
.enter().append("g")
.attr("class", "rect")
.attr("transform", function (d) {
return "translate(0," + y(d.Date) + ")";
});
var rect = layer.selectAll("rect")
.data(function (d) {
return d.ages;
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", 0)
.attr("x", width)
.attr('y', function (d, i) {
return y(d.Date);
})
.attr("height", y.rangeBand())
.style("fill", function (d) {
return color(d.name);
});
rect.transition()
.duration(600)
.delay(function (d, i) {
return i * 300;
})
.attr("width", function (d) {
return x(d.x1) - x(d.x0);
})
.attr("x", function (d) {
return x(d.x0);
});
</script>
</body>
</html>