如何用dc.js创建一行叠行图？
如何用dc.js创建一行叠行图？
提问于 2015-03-31 03:21:18
在DC.js github上，Lon Riesberg的股票市场选择策略被列为使用dc.js库的一个示例。
Lon能够创建一个堆叠的行图，并将其显示为单个行。
我希望能完成同样的事情。我只知道如何创建行图，如在我的密码里所示，如下所示。
HTML
<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="https://rawgit.com/dc-js/dc.js/master/dc.js" ></script>
<div id="rowChart"></div>Javascript
items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
{Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
{Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
{Id: "06", Name: "Red", Price: "100.00", Quantity: "2",TimeStamp:676},
{Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
];
var ndx = crossfilter(items);
var Dim = ndx.dimension(function (d) {return d.Name;})
var RowBarChart1 = dc.rowChart("#rowChart")
RowBarChart1
.width(250).height(500)
.margins({top: 20, left: 15, right: 10, bottom: 20})
.dimension(Dim)
.group(Dim.group().reduceCount())
.elasticX(true)
.label(function (d) {return d.key + " " + d.value;})
.ordering(function(d) { return -d.value })
.xAxis().tickFormat(function(v){return v}).ticks(3);
dc.renderAll();如何使这是一个堆叠的行图，其中每个部分是‘红色’，‘白色，或’蓝色‘，并显示在一行？
我的目标是有一个我可以建立的工作例子。到目前为止，答案已经有所帮助，但我仍然无法建立这个。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-05-26 19:01:38
您可以用d3.js创建一个div，并为flex添加属性。
http://codepen.io/luarmr/pen/BNQYov
var chart = d3.select("#rowChart");
var bar = chart.selectAll("div")
.data(data)
.enter().append("div")
.attr('style',function(d,i){
return (
'flex:' + d.Quantity + '; '
+ 'background:' + color(i) + ';'
)
})attr.style可以改善。
您可以添加webkit的前缀。
http://caniuse.com/#search=flex
编辑
Stack Overflow用户
发布于 2015-03-31 05:23:41
用于生成堆叠条形图的javascript代码根本不使用DC.js。它只使用D3.js。这可以从app.min.js的美化转换中看出；一个(或两者兼而有之)在这些功能中，产生堆叠条形图的是：
G = function(e, t) {
var r = (o - 40) / t;
f = "";
var a = d3.select("#categories-chart").append("svg").attr("height", 50).attr("width", o),
s = 0;
a.selectAll("rect").data(e).enter().append("rect").attr("category", function(e) {
return e.key
}).attr("x", function(e) {
var t = s,
a = Math.floor(r * e.value);
return s += a, t
}).attr("y", 7).attr("width", function(e) {
var t = Math.floor(r * e.value);
return t
}).attr("height", 25).style("fill", function(e) {
return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0
}).on("click", function(e) {
f = e.key, d3.select("#categories-chart").select(".reset").style("display", null), m.filter(f).top(t), C(m, t), dc.renderAll()
}).on("mouseover", function() {
d3.select(this).style("cursor", "pointer")
}), $("rect").popover({
container: "body",
trigger: "hover",
placement: "top",
content: function() {
return d3.select(this).attr("category")
}
})
},
C = function(e, t) {
var r = (o - 40) / t,
a = 0,
s = d3.select("#categories-chart");
s.selectAll("rect").data(e).transition().duration(150).attr("x", function(e) {
var t = a,
s = Math.floor(r * e.value);
return a += s, t
}).attr("y", 7).attr("width", function(e) {
var t = Math.floor(r * e.value);
return t
}).attr("height", 25).attr("category", function(e) {
return e.key
}).style("fill", function(e) {
return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0
}), $("rect").popover({
container: "body",
trigger: "hover",
placement: "top",
content: function() {
return d3.select(this).attr("category")
}
})
},正如你所看到的，没有DC.js。从其他地方看，似乎没有DC.js本机解决方案。现在，您可能不得不使用D3.js (例如jsFiddle)。
Stack Overflow用户
发布于 2015-05-23 06:58:36
我没有找到任何从DC.js创建堆叠行聊天的api，所以在https://www.dashingd3js.com/d3js-scales的帮助下使用了D3.js
var items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: 1,TimeStamp:111},
{Id: "02", Name: "Green", Price: "10.00", Quantity: 1,TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: 4,TimeStamp:434},
{Id: "03", Name: "Orange", Price: "9.00", Quantity: 2,TimeStamp:545},
{Id: "06", Name: "Red", Price: "100.00", Quantity: 2,TimeStamp:676},
{Id: "05",Name: "purple", Price: "1.20", Quantity: 2,TimeStamp:777}
];
var max_x = 700; //maximum width of the graph
var height = 20; //maximum height
var temp_x = 0 ;
// calculating the quantity of all items
for (var i = 0; i < items.length; i++) {
temp_x = temp_x + items[i].Quantity;
}
var svgContainer = d3.select("body").append("svg")
.attr("width", max_x)
.attr("height", height)
var rectangles = svgContainer.selectAll("rect")
.data(items)
.enter()
.append("rect");
//temporary variable to mark start and end of an item.
var start=0;
var end=0;
var end1=0;
var rectangleAttributes = rectangles
.attr("x", function (d) {
// dynamically calculate the starting point of each item
start=end;
end=end+(d.Quantity * max_x)/temp_x;
return start;
})
.attr("height", height)
.attr("width", function (d) {
//dynamically calculate the width of each item
end1=(d.Quantity * max_x)/temp_x;
return end1; })
.style("fill", function(d) { return d.Name; });Html代码
<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></script>
<div id="rowChart"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29360042
复制相关文章
相似问题
腾讯云开发者
