0
目的：X軸にジョブタイトルが含まれ、Y軸に各ジョブの部品番号が含まれるグリッドを作成します。ジョブが特定の部品番号を複数必要とする場合、セルを垂直方向に2/3/4/5 ...異なるセルに分割しますが、同じ行/列に収まります。複数の色のD3.js矩形を塗りつぶしたり、複数の矩形に分割する
問題：特定のデータポイントに対して複数の矩形を追加する際に問題が発生しています。私はこの答えを使ってみたhereしかし運がなかった。私は幸運もなく各ループのためにaを使ってみました。なにか提案を？
現在の進捗状況：
目標：問題の
コードスニペット：
dayOffset = dayFormat(dateExtent[0]);
rect = heatmap.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('width', function (d) {
return Xcellscale/d.NumberofPart;
})
.attr('height', Ycellscale)
.attr('x', function (d) {
return xAxisScale(d.JobNumber);
})
.attr('y', function (d) {
return yAxisScale(d.PartNumber);
})
.attr('fill', '#000FF0');
JSON：
{
"data": [
{
"PartNumber": "a",
"JobNumber": "a",
"NumberofPart": "2",
"timestamp": "2014-09-25T00:00:00",
"value": {
"PM2.5": 30.22
}
},
{
"PartNumber": "b",
"JobNumber": "b",
"NumberofPart": "1",
"timestamp": "2014-09-25T01:00:00",
"value": {
"PM2.5": 41.61
}
},
{
"PartNumber": "c",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T02:00:00",
"value": {
"PM2.5": 50.71
}
},
{
"PartNumber": "d",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T02:00:00",
"value": {
"PM2.5": 50.71
}
},
{
"PartNumber": "e",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T02:00:00",
"value": {
"PM2.5": 50.71
}
},
{
"PartNumber": "f",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T02:00:00",
"value": {
"PM2.5": 50.71
}
},
{
"PartNumber": "g",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T02:00:00",
"value": {
"PM2.5": 1000.71
}
},
{
"PartNumber": "h",
"JobNumber": "c",
"NumberofPart": "1",
"timestamp": "2014-09-25T03:00:00",
"value": {
"PM2.5": 250.34
}
},
{
"PartNumber": "i",
"JobNumber": "d",
"NumberofPart": "1",
"timestamp": "2014-09-25T04:00:00",
"value": {
"PM2.5": 79.64
}
},
{
"PartNumber": "j",
"JobNumber": "e",
"NumberofPart": "2",
"timestamp": "2014-09-25T05:00:00",
"value": {
"PM2.5": 76.93
}
},
{
"PartNumber": "k",
"JobNumber": "f",
"NumberofPart": "2",
"timestamp": "2014-09-30T06:00:00",
"value": {
"PM2.5": 106.45
}
}
]
}
ここに私のコードがあります。このD3.js Exampleに基づいています。タイムスタンプに関して私が削除しなかった余分なコードについては残念です。
$(document).ready(function() {
//UI configuration
var itemSize = 18,
cellSize = itemSize - 1,
width = 800,
height = 800,
margin = { top: 20, right: 20, bottom: 20, left: 25 };
//formats
var hourFormat = d3.time.format('%H'),
dayFormat = d3.time.format('%j'),
timeFormat = d3.time.format('%Y-%m-%dT%X'),
monthDayFormat = d3.time.format('%m.%d');
//data vars for rendering
var dateExtent = null,
data = null,
dayOffset = 0,
colorCalibration = ['#00ff00', '#0033cc', '#ffcc00', '#ff6600', '#ff0000', '#9E0142'],
dailyValueExtent = {};
data = jsondata.data;
//axises and scales
var axisWidth = 0,
axisHeight = itemSize * 24,
xAxisScale = d3.scale.ordinal()
.domain(data.map(function (d) { return d["JobNumber"]; }))
.rangePoints([0, width]);
xAxis = d3.svg.axis()
.scale(xAxisScale)
.orient('top'),
yAxisScale = d3.scale.ordinal()
.domain(data.map(function (d) { return d["PartNumber"]; }))
.rangePoints([0, width]),
yAxis = d3.svg.axis()
.scale(yAxisScale)
.orient('left');
initCalibration();
var svg = d3.select('[role="heatmap"]');
var heatmap = svg
.attr('width', width)
.attr('height', height)
.append('g')
.attr('width', width - margin.left - margin.right)
.attr('height', height - margin.top - margin.bottom)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var rect = null;
data.forEach(function (valueObj) {
valueObj['date'] = timeFormat.parse(valueObj['timestamp']);
});
dateExtent = d3.extent(data, function (d) {
return d.date;
});
svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class', 'x axis')
.call(xAxis)
.append('text')
.text('JobNumber')
.attr('transform', 'translate(' + axisWidth + ',-10)');
svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.text('PartNumber')
.attr('transform', 'translate(-10,' + axisHeight + ') rotate(-90)');
//render heatmap rects
Xcellscale = width/(xAxisScale.domain().length -1);
Ycellscale = height/(yAxisScale.domain().length - 1);
console.log(Xcellscale + " " + Ycellscale);
console.log(width + " " + height);
console.log(xAxisScale.domain().length + " " + data.map(function (d) { return d["PartNumber"]; }).length);
dayOffset = dayFormat(dateExtent[0]);
rect = heatmap.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('width', function (d) {
return Xcellscale/d.NumberofPart;
})
.attr('height', Ycellscale)
.attr('x', function (d) {
return xAxisScale(d.JobNumber);
})
.attr('y', function (d) {
return yAxisScale(d.PartNumber);
})
.attr('fill', '#000FF0');
rect.filter(function (d) { return d.value['PM2.5'] > 0; })
.append('title')
.text(function (d) {
return monthDayFormat(d.date) + ' ' + d.value['PM2.5'];
});
//renderColor();
function initCalibration() {
d3.select('[role="calibration"] [role="example"]').select('svg')
.selectAll('rect').data(colorCalibration).enter()
.append('rect')
.attr('width', cellSize)
.attr('height', cellSize)
.attr('x', function (d, i) {
return i * itemSize;
})
.attr('fill', function (d) {
return d;
});
//bind click event
d3.selectAll('[role="calibration"] [name="displayType"]').on('click', function() {
renderColor();
});
}
function renderColor() {
var renderByCount = document.getElementsByName('displayType')[0].checked;
rect
.attr('width', function (d) {
return Xcellscale/d.NumberofPart;
})
.filter(function (d) {
return (d.value['PM2.5'] >= 0);
})
.transition()
.delay(function (d) {
return 1;
})
.duration(500)
.attrTween('fill', function (d, i, a) {
//choose color dynamicly
var colorIndex = d3.scale.quantize()
.range([0, 1, 2, 3, 4, 5])
.domain(([0, 500]));
return d3.interpolate(a, '#00ff00');
})
}
//extend frame height in `http://bl.ocks.org/`
d3.select(self.frameElement).style("height", "600px");
});
あなたは4つの駅、先頭の1、2、同一途中で停止し、最後に1つずつでてLinearGradient介して2つの色で矩形を埋めることができます。 –
は、linearGradientでストップの量を増やす方法はありますか？ – Mark
あなたは望みの数を持つことができ、DOMを直接使うか、またはd3 –