С D3, как я могу добавить легенду к моей гистограмме? - PullRequest
Новая
       33

С D3, как я могу добавить легенду к моей гистограмме?

0 голосов
/ 24 марта 2020

Я новичок в D3, и я не нахожу много документации о том, как добавить легенду на гистограмму. Все, что я могу найти, это примеры с легендами, которые строят свои графики по-другому, что не очень полезно. Любые предложения о том, как я могу добавить легенду, используя код, который у меня есть? Или вы знаете о существующей документации, на которую вы могли бы указать мне? 

lastThreeMonths = [{
"model_name": "Jan",
"field1": 25,
"field2: 54,
"field3": 39},{"model_name": "Feb",
"field1": 10,
"field2: 32,
"field3": 44},{"model_name": "Mar",
"field1": 48,
"field2: 16,
"field3": 24}]  

var graph2 = function(data) {

                var models = data

                  models = models.map(i => {
                    i.model_name = i.model_name;
                      return i;
                  });

                  var container = d3.select('.graph-holder2'),
                      width = 700,
                      height = 400,
                      margin = {top: 30, right: 20, bottom: 50, left: 50},
                      barPadding = .2,
                      axisTicks = {qty: 7, outerSize: 0, dateFormat: '%m-%d'};

                  var svg = container
                     .append("svg")
                     .attr("width", width)
                     .attr("height", height)
                     .append("g")
                     .attr("transform", `translate(${margin.left},${margin.top})`);

                  var xScale0 = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(barPadding);
                  var xScale1 = d3.scaleBand();
                  var yScale = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]);

                  var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
                  var yAxis = d3.axisLeft(yScale).ticks(axisTicks.qty).tickSizeOuter(axisTicks.outerSize);

                  xScale0.domain(models.map(d => d.model_name));
                  xScale1.domain(['field1', 'field2', 'field3']).range([0, xScale0.bandwidth()]);
                  yScale.domain([0, d3.max(models, function(d) {
                    return Math.max(d.field1, d.field2, d.field3)
                  })]);

                  var model_name = svg.selectAll(".model_name")
                    .data(models)
                    .enter().append("g")
                    .attr("class", "model_name")
                    .attr("transform", d => `translate(${xScale0(d.model_name)},0)`);

                  /* Add field1 bars */
                  model_name.selectAll(".bar.field1")
                    .data(d => [d])
                    .enter()
                    .append("rect")
                    .attr("class", "bar field1")
                  .style("fill","blue")
                    .attr("x", d => xScale1('field1'))
                    .attr("y", d => yScale(d.field1))
                    .attr("width", xScale1.bandwidth())
                    .attr("height", d => {
                      return height - margin.top - margin.bottom - yScale(d.field1)
                    });

                  /* Add field2 bars */
                  model_name.selectAll(".bar.field2")
                    .data(d => [d])
                    .enter()
                    .append("rect")
                    .attr("class", "bar field2")
                  .style("fill","red")
                    .attr("x", d => xScale1('field2'))
                    .attr("y", d => yScale(d.field2))
                    .attr("width", xScale1.bandwidth())
                    .attr("height", d => {
                      return height - margin.top - margin.bottom - yScale(d.field2)
                    });

                        /* Add field3 bars */
                  model_name.selectAll(".bar.field3")
                  .data(d => [d])
                  .enter()
                  .append("rect")
                  .attr("class", "bar field3")
                .style("fill","green")
                  .attr("x", d => xScale1('field3'))
                  .attr("y", d => yScale(d.field3))
                  .attr("width", xScale1.bandwidth())
                  .attr("height", d => {
                    return height - margin.top - margin.bottom - yScale(d.field3)
                  });

                  // Add the X Axis
                  svg.append("g")
                     .attr("class", "x axis")
                     .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
                     .call(xAxis);

                  // Add the Y Axis
                  svg.append("g")
                     .attr("class", "y axis")
                     .call(yAxis); 


                        //add label for x axis and y axis
                svg.append("text").text("Total Downloads")
                    .attr("x",0-height/2.6)
                    .attr("y",0-margin.left)
                    .attr("dy","1em")
                    .style("text-anchor", "middle")
                    .attr("transform","rotate(-90)");

                svg.append("text").text("Months")
                    .attr("x",width/2.2)
                    .attr("y",height/1.3 + margin.bottom)
                    .style("text-anchor", "middle");



            }

            graph2(lastThreeMonths);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>```


Thank you for your assistance.
...