dc.js के साथ एक पंक्ति के साथ स्टैक्ड पंक्ति चार्ट कैसे बनाएं?

Question

DC.js github पर, Stock Market Selection Strategy by Lon Riesberg dc.js लाइब्रेरी का उपयोग करने के उदाहरण के रूप में सूचीबद्ध है।

लॉन एक स्टैक्ड पंक्ति चार्ट बनाने और इसे एक पंक्ति के रूप में प्रदर्शित करने में सक्षम था।

मैं इसी कार्य को पूरा करने में सक्षम होना चाहते हैं। मैं केवल in my codepen दिखाए गए अनुसार, पंक्ति चार्ट बनाने का तरीका समझने में सक्षम हूं।

एचटीएमएल

<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> 

जावास्क्रिप्ट

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(); 

मैं इस एक खड़ी पंक्ति चार्ट जहां प्रत्येक अनुभाग 'रेड', 'सफेद,' या 'ब्लू' है और एक में प्रदर्शित किया जाता होगा पंक्ति?

मेरा लक्ष्य एक कामकाजी उदाहरण है जिसे मैं बंद कर सकता हूं। इस प्रकार उत्तर ने मदद की है, लेकिन मैं अभी भी इसे बनाने में सक्षम नहीं हूं।

Answer 1

आप d3.js के साथ एक div बना सकते हैं और फ्लेक्स के लिए विशेषता जोड़ सकते हैं ...

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 बेहतर बना सकते हैं।

आप वेबकिट

http://caniuse.com/#search=flex

संपादित

http://codepen.io/luarmr/pen/yNVZMN

Answer 2

उस स्टैक्ड बार चार्ट का उत्पादन करने के लिए उपयोग किया जाने वाला जावास्क्रिप्ट कोड 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.: एक (? या दोनों) इन कार्यों में से है कि स्टैक्ड बार चार्ट का निर्माण होते हैं कहीं और देख रहे हैं, ऐसा कोई डीसी.जेएस देशी समाधान प्रतीत नहीं होता है। अभी के लिए, आपको D3.js का उपयोग करना पड़ सकता है (उदा। jsFiddle)।

Answer 3

मैं किसी भी एपीआई dc.js से खड़ी पंक्ति चैट बनाने के लिए नहीं मिल रहा था, इसलिए https://www.dashingd3js.com/d3js-scales

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; }); 

एचटीएमएल कोड की मदद से D3.js इस्तेमाल किया

<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> 

उदाहरण: http://codepen.io/anon/pen/vOXPBq?editors=101