1
슬라이더를 움직일 때까지 색상이 트리 맵의 개별 노드에 표시되지 않습니다. 나는 다른 누군가가 전에이 문제에 부딪쳤을지도 모른다고 생각했다.D3JS Treemap이 렌더링되지만 색상이 표시되지 않습니다.
여기 뒤에 JS이다. 당신이 저도 그렇게 게시하고 싶다면 CSS 파일은 꽤 슬림합니다.
$(function() {
// Load templates
$('.template').each(function() {
var me = $(this);
var src = me.attr('src');
var data = $.get(src, function (template) {
me.html(template);
});
});
var slider = $('#sliderControl').slider({
formatter: function (value) {
return "Show errors over " + value.toFixed(0) + "% in red";
}
});
var width = 0,
height = 0;
function calcDim() {
var container = $('#graph');
width = container.width();
height = width * 0.5;
container.height(height);
};
calcDim();
var canvas = d3.select('#graph');
var scaleArr = buildColorScaleDomain();
var color = d3.scale.linear().domain(scaleArr).range(['#62A35D', '#D4FFD5', '#FEC5C7', '#D36461']).clamp(true);
var sizes = d3.scale.linear().domain([0, 10000]).range([1, 1000]).clamp(true);
// Use sig to scale from 0+ to decrease/increase the fidelity (higher) or speed (lower) of the graph
var sig = 5;
var resolution = Math.pow(10, sig);
var params = 'map?';
//if (provider.length > 0)
// params += 'provider=' + provider + '&';
//if (version.length > 0)
// params += 'version=' + version + '&';
//if (type.length > 0)
// params += 'type=' + type + '&';
//if (dateBeg.length > 0)
// params += 'dateBeg=' + dateBeg + '&';
//if (dateEnd.length > 0)
// params += 'dateEnd=' + dateEnd + '&';
//Envision.Init();
var _url = '/api/report/' + params;
var urlParts = document.location.href.split("/");
_url = "/" + urlParts[3] + _url;
d3.json(_url, function (data) {
var treemap = d3.layout.treemap().size([100 * resolution, 100 * resolution]).value(getSelectedPerformanceValue()).sort(function (a, b) {
return a.total - b.total;
}).sticky(true);
var node = canvas.data([{
children: data
}]).selectAll('.node').data(treemap).enter().append('div').attr('class', 'node').style('background', function (d) {
return color(1 - d.quality_of_messages_received);
}).call(position).attr('title', function (d) {
return d.provider_desc;
}).attr('data-content', function (d) {
return "" + d.sending_facility + "<br>AA: " + d.AA_count + "<br>AE: " + d.AE_count + "<br>AR: " + d.AR_count + "<br>Total: " + d.total + "<br>Quality: " + ((d.quality_of_messages_received) * 100).toFixed(2) + "%<br>Errors: " + ((1 - d.quality_of_messages_received) * 100).toFixed(2) + "%<br>Grade: " + calcGrade(d);
}).html(function (d) {
return d.sending_facility;
});
slider.on('slide', function (ev) {
var me = $(this);
var scaleArr = buildColorScaleDomain();
color.domain(scaleArr);
canvas.selectAll('.node').style('background', function (d) {
return color(1 - d.quality_of_messages_received);
});
});
$(".node").popover({
html: true,
trigger: 'hover',
placement: 'auto right',
container: 'body'
});
$('#dataSelect').on('change', function (e) {
node.data(treemap.value(getSelectedPerformanceValue()).nodes).call(position);
});
$(window).on('resize', function (e) {
calcDim();
});
ko.applyBindings(new function() {
var self = this;
this.data = data;
this.getDataRows = function() {
return self.data;
};
this.getProviderName = function (data) {
return data.provider_desc;
};
this.getProviderVolume = function (data) {
return data.total;
};
this.getProviderErrors = function (data) {
return "" + ((1 - data.quality_of_messages_received) * 100).toFixed(0) + "%";
};
this.getProviderGrade = function (data) {
return calcGrade(data);
};
});
});
function position() {
this.style('left', function (d) {
if (d.children) return;
return (d.x/resolution) + '%';
}).style('top', function (d) {
if (d.children) return;
return (d.y/resolution) + '%';
}).style('width', function (d) {
if (d.children) return;
return (d.dx/resolution) + '%';
}).style('height', function (d) {
if (d.children) return;
return (d.dy/resolution) + '%';
}).style('font-size', function (d) {
if (d.children) return;
return (Math.min(d.dx, d.dy)/resolution) + "%";
});
}
function getSelectedPerformanceValue() {
var fn = function (value) {
return function (d) {
return d[value];
}
};
var me = $('#dataSelect :selected');
var val = me.val().toLowerCase().trim();
switch (val) {
case "total":
fn = fn('total');
break;
case "aa":
fn = fn('AA_count');
break;
case "ae":
fn = fn('AE_count');
break;
case "ar":
fn = fn('AR_count');
break;
case "quality":
fn = function (d) {
return d.quality_of_messages_received;
};
break;
case "errors":
fn = function (d) {
return 1 - d.quality_of_messages_received;
};
break;
default:
fn = fn('total');
break;
}
return fn;
}
function buildColorScaleDomain() {
var slideValue = slider.data('slider').getValue();
var outerLimits = 10;
var bottom = 0.001;
var a0 = Math.max(slideValue - (outerLimits * 2), 0); // greener
var a1 = Math.max(slideValue - outerLimits, bottom);
var a2 = Math.max(slideValue, bottom * 2); // redder
var arr = [a0/100, a1/100, a1/100, a2/100];
return arr;
}
function calcGrade(data) {
var quality = Math.floor(data.quality_of_messages_received * 10).toFixed(0);
switch (quality) {
case '10':
case '9':
return "A";
case '8':
return "B";
case '7':
return "C";
case '6':
return "D";
default:
return "F";
};
}
})
트리 맵은 무엇입니까? 어떤 슬라이더? –
그림이 추가되었습니다. 나는 그것이 어느 것인지 모른다. 우리는 승무원을 데리고 설계 작업을했습니다. 그들은 방금 몇 개의 와이어 프레임과 기타 무작위로 우리가 사용할 계획을 세웠습니다. 나는이 모든 것을 유선으로 처리했다. 나는 D3 웹 사이트를 보려고했지만 어느 것이 있는지 전혀 모른다. – DeadlyChambers
그럼 코드를 보여줘야합니다. –