Высота баров слишком велика

-3

Я реализую диаграммы d3, но полосы моей диаграммы пересекают ось y, потому что они выходят из моего холста. Кажется, что высота - проблема. Не знаю причину. У меня есть масштаб оси y до 500, если любые значения больше 500, тогда это выходит из моего холста. Но масштаб сделан d3. Так что я не могу управлять scale.This мой HTMLВысота баров слишком велика

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta content="utf-8" http-equiv="encoding"> 

    <title>D3</title> 
    <!-- <link rel="stylesheet" type="text/css" href="mystyle1.css" /> --> 

    <style> 
     body { 
      color: #000; 
     } 

     .axis { 
      font: 10px sans-serif; 
     } 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: #000; 
      shape-rendering: crispEdges; 
     } 

     .bar { 
      fill: steelblue; 
     } 

     .bar:hover { 
      fill: brown; 
     } 
    </style> 

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="123.js" type="text/javascript"></script> 

<script> 
var thisIsGlobal; 
</script> 

</head> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

<body> 
<div id="chart"></div> 
<div align="center"> 
    From : <input type="date" name="field1" id="field1" /> To : <input type="date" name="field2" id="field2" /><br /><br /> 
    <input type="button" onclick="render(true)" value="Submit" /> 
</div> 

<script> 
    var jsonURL = 'avb.json'; 

    var myData = []; 
    var fliterdata=[]; 
    var tempdata=[]; 
    var selectop=""; 

function filterJSON(json, key, value) { 
    var result = []; 
    for (var foo in json) { 

    if (json[foo][key] == value) { 
     result.push(json[foo]); 


    } 
    } 
    return result; 
} 

function selectValue(d){ 
    // console.log("before op",selectop); 
    switch(selectop){ 
      case "01": 
       return d.val001; 
       break; 
      case "02": 
       return d.val002; 
       break; 
      case "03": 
       return d.val003; 
       break; 
      case "04": 
       return d.val004; 
       break; 
      case "05": 
       return d.val005; 
       break; 
      default: 
       //console.log("default"); 
       return d.val001; 
     } 


} 

    var margin = { 
     top: 20, 
     right: 0, 
     bottom: 80, 
     left: 40 
    }; 
    var width = 500 - margin.left - margin.right; 
    var height = 300 - margin.top - margin.bottom; 



    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1); 
    var yScale = d3.scale.linear().range([height, 0]); 
    var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d")); 
    var vAxis = d3.svg.axis().scale(yScale).orient('left'); 
    var tooltip = d3.select('body').append('div') 
      .style('position', 'absolute') 
      .style('background', '#f4f4f4') 
      .style('padding', '5 15px') 
      .style('border', '1px #333 solid') 
      .style('border-radius', '5px') 
      .style('opacity', 'o'); 

//function getDates() { 
    //  return [document.getElementById('field1').value, document.getElementById('field2').value]; 
    // } 

    function render(filterByDates) { 


     d3.select('svg').remove(); 

     if (filterByDates) { 

       tempData=fliterdata; 
       console.log("before date fliter data", tempData); 
      var date1 = new Date(document.getElementById('field1').value); 
      var date2 = new Date(document.getElementById('field2').value); 

      //date1 = new Date(date1 + " UTC"); 
      //date2 = new Date(date2 + " UTC"); 

      //date1 = new Date(date1.getTime() + (date1.getTimezoneOffset() * 60000)); 
      //date2 = new Date(date2.getTime() + (date2.getTimezoneOffset() * 60000)); 


      tempData = tempData.filter(function(d) { 
       console.log(date1,date2); 
       // alert(date1); 
       return d.date >= date1 && d.date <= date2; 


      }); 
       console.log("After date fliter data", tempData); 
     } 


     xScale.domain(tempData.map(function(d) { 
        return d.date; 
       }).sort(function(a,b) { 
        return a > b; 
       }) 
     ); 

     yScale.domain([0, d3.max(tempData, function(d) { 
       //console.log("selectValue(d)" , selectValue(d)); 
       //var cool=d.val00+selectop; 
       //console.log("cool",cool); 
      return selectValue(d); 
     })]); 

     var svg = d3.select('#chart').append('svg') 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     svg 


       .append('g') 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(hAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", "-.55em") 
       .attr("transform", "rotate(-90)"); 

     svg 
       .append('g') 
       .attr("class", "yaxis") 
       .call(vAxis) 

     svg 
       .selectAll(".bar") //makes bar 
       .data(tempData) 
       .enter().append("rect") 
       .attr("class", "bar") 
       .style("fill", "teal") 
       .attr("x", function(d) { 
        return xScale(d.date); 
       }) 
       .attr("width", xScale.rangeBand()) 
       .attr("y", function(d) { 


        return yScale(selectValue(d)); 
       }) 
       .attr("height", function(d) { 

        console.log("as", d.value); 
        return height - yScale(selectValue(d)); 
       }) 
       .on('mouseover', function(d) { 
        tooltip.transition() 
          .style('opacity', 1) 

        tooltip.html(d.value) 
          .style('left', (d3.event.pageX) + 'px') 
          .style('top', (d3.event.pagey) + 'px') 
        d3.select(this).style('opacity', 0.5) 
       }) 
       .on('mouseout', function(d) { 
        tooltip.transition() 
          .style('opacity', 0) 
        d3.select(this).style('opacity', 1) 
       }); 
    } 

    d3.json(jsonURL, function(data) { 

     myData = data; 
     myData.forEach(function(d) { 

      d.date = new Date(d.date); 
      d.value=""; 

      d.name = +d.name; 
      console.log(d.date,"Gt date"); 
      d.date = new Date(d.date + " UTC"); 
      console.log(d.date,"localtimezone date"); 
     }); 

     //myData.data.sort(); 
     //console.log(,"hello j"); 

     //render(false,myData); 
     // console.log(render); 
     //copy from here 

     //tempData=myData; 


     $("#listbox").on("click", function() { 




      var key = $(this).val(); 

      var value=$('#listbox option:selected').text(); 
      console.log("tx:", value); 

      selectop=String(key); 
      selectop=selectop.slice(-2); 
      console.log("mydata: ", myData); 
      console.log("prod:",selectop); 

      fliterdata=filterJSON(myData, key, value); 

      console.log("fliterdata: ", fliterdata); 
      tempData=fliterdata; 
        render(false); 




     }); 

     //till here 
    }); 
</script> 

<label> List of Tables : </label><br> 
<form name="myform" id="myForm"> 
    <div style="height: 30px; width: 50px;"> 
     <select id="dropdown1"></select> 
    </div> 
    <style> 
     #listbox { 
      display: none; 
     } 
     #listbox { 
      position: relative; 
     } 
    </style> 

    <div style="margin-left: 150px; margin-top: -30px; height: auto;"> 
     <select id="listbox", multiple></select> 
    </div> 

</form> 
</body> 
</html>

Мой Javascript

$(document).ready(function() { 
     $.ajax({ 
      url: "avb.json", 
      dataType: "json", 
      success: function(obj) { 
       console.log("obj--", obj) 
       var jsObject = obj; 
       var usedNames = []; 
       $('<option>', { 
        text: 'Select your Option', 
        value: '', 
        selected: 'selected', 
        disabled: 'disabled', 
        location: 'fixed' 
       }).appendTo('#dropdown1') 
       $.each(obj, function(key, value) { 
        if (usedNames.indexOf(value.name) == -1) { 

         $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>"); 
         usedNames.push(value.name); 
         } 

       }); 
       $('#dropdown1').change(function() { 

        $('#listbox').toggle(this.value != ""); 




       }); 

     $('#dropdown1').change(function() { 

        $('#listbox').empty(); 

        $('<option>', { 
         text: 'Select your List Option', 
         value: '', 
         selected: 'selected', 
         disabled: 'disabled' 
        }).appendTo('#listbox'); 


        var selection = $('#dropdown1 :selected').text(); 
        console.log("as".selection); 
        $.each(jsObject, function(index, value) { 
         console.log("%o",value) 
         if (value['name'] == selection) { 
          var optionHtml = ''; 
          for (var i = 1; i <=20; i++) { 
           var attr = 'attr' + ('000' + i).substr(-3); 
           var val = 'val' + ('000' + i).substr(-3); 
           //optionHtml += '<option value="' + attr + '" data-val="'+value[val]+'">' + value[attr] + '</option>'; 

           if(value[val]){ optionHtml += '<option value="' + attr + '" data-val="'+value[val]+'">' + value[attr] + '</option>'; } 


          } 

          $("#listbox").css("width", "500px") 

          $("#listbox").css("height", "300px") 
          $('#listbox').append(optionHtml); 
          return false; 
         } 
         var selectedOption = $(this).find('option:selected'); 
         console.log(selectedOption); 

        }); 

       }); 
} 
    }); 
});

Мой JSON

[ { 
"name": "ABC", 
"date": 1459461600000, 
"attr001": "SIGN1", 
"val001": "7", 
"attr002": "SIGN2", 
"val002": "7", 
"attr003": "SIGN3", 
"val003": "100.00", 
"attr004": "SIGN4", 
"val004": "0" 
}, 
{ 
"name": "ABC", 
"date": 1459461600000, 
"attr001": "SIGN1", 
"val001": "20", 
"attr002": "SIGN2", 
"val002": "70", 
"attr003": "SIGN3", 
"val003": "100.00", 
"attr004": "SIGN4", 
"val004": "50" 
}, 


{ "name": "XYZ", 
"date": 1459125900000, 
"attr001": "VISSE1", 
"val001": "100", 
"attr002": "VISSE2", 
"val002": "7", 
"attr003": "VISSE3", 
"val003": "300.00", 
"attr004": "VISSE4", 
"val004": "0" 
}, 

{ "name": "XYZ", 
"date": 1459461600000, 
"attr001": "VISSE1", 
"val001": "50", 
"attr002": "VISSE2", 
"val002": "70", 
"attr003": "VISSE3", 
"val003": "300.00", 
"attr004": "VISSE4", 
"val004": "0" }, 

{ "name": "XYZ", 
"date": 1459461900000, 
"attr001": "VISSE1", 
"val001": "300", 
"attr002": "VISSE2", 
"val002": "10", 
"attr003": "VISSE3", 
"val003": "500.00", 
"attr004": "VISSE4", 
"val004": "0" } ]

источник

2016-05-03 sahil

Вы можете поместить свой пример на jsfiddle? – Adam

это моя скрипка, но в этом chrt не получается рендеринг. Не знаю, почему – sahil

может либо ссылаться на размещенную версию на jsfiddle/codepen/etc или предоставлять относительные файлы тоже '123.js' и' avb.json' –

Ваша проблема была ваша d3.max функция не возвращал правильное значение. Таким образом, вместо этого:

d3.max(myData, function(d) { 
    console.log(d.val001) 
    return d.val001; 
    })

ли это:

d3.max(myData, function(d) { 
    console.log(d.val001) 
    return +d.val001; //this is the change 
    })

Это связано с вашей функции не превращающего вашу строку в целое число.

Обновлено скрипку: http://jsfiddle.net/thatOneGuy/k013yrgc/14/

источник

2016-05-03 12:26:35 thatOneGuy

Я изменил в своем коде здесь yScale.domain ([0, d3.max (tempData, function (d) {return selectValue (+ d), но теперь моя диаграмма не получается – sahil

Что такое 'selectValue'? – thatOneGuy

Что вы точно пытаетесь сделать с помощью 'return selectValue (+ d);' – SiddP

Высота баров слишком велика

ответ

Смежные вопросы