>

d3 차트를 처음 사용합니다.

현재 d3 캘린더보기 를 기반으로 차트를 만들고 있습니다.

내가 가진 문제는 색상에 관한 것입니다. 그것은 d3.scaleQuantize() 를 사용합니다 도메인을 색상 수로 나눈 다음 각 섹션에 색상을 할당합니다. 즉, 모든 색상의 범위가 동일합니다.

다음과 같은 경우 1&2는 파란색, 3&4는 검은 색, 5&6은 빨간색, 7&8은 노란색, 9&10은 녹색입니다.

var color = d3.scaleQuantize()
.domain([1,10])
.range(["Blue", "Black", "Red", "Yellow", "Green"]);

특정한 경우, 범위에 따라 색상을 설정해야합니다. 예를 들어 1&3 사이의 항목은 파란색, 4&6은 검정색, 6 이상의 항목은 빨간색입니다.

이것이 가능합니까?

감사합니다.

모든 코드를 참조로 포함하고 있습니다 :

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var url_string = window.location.href;
var url = new URL(url_string);
var Cell = url.searchParams.get("Cell");
var width = 960,
  height = 136,
  cellSize = 17;
var color = d3.scaleQuantize()
  .domain([0, 10])
  .range(["Blue", "Black", "Red", "Yellow", "Green"]);
var dateFormat = d3.timeFormat("%Y-%m-%d");
var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(2017, 2018))
  .enter().append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
var rect = svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#ccc")
  .selectAll("rect")
  .data(function(d) {
    return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("rect")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) {
    return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
  })
  .attr("y", function(d) {
    return d.getDay() * cellSize;
  })
  .datum(dateFormat);
svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#000")
  .selectAll("path")
  .data(function(d) {
    return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("path")
  .attr("d", pathMonth);
var url = "http://Server/Service1.svc/GetData/" + Cell;
d3.json(url, function(error, data) {
  //populating data since i don't have the file
  var nest = d3.nest()
    .key(function(d) {
      return d.datekey;
    })
    .map(data);
    rect.filter(function(d) {
      return ("$" + d) in nest;
    })
    .attr("fill", function(d) { 
      return color(nest[("$" + d)][0].Sales);
    })
});
function pathMonth(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
    d0 = t0.getDay(),
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
    d1 = t1.getDay(),
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
    "H" + w0 * cellSize + "V" + 7 * cellSize +
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
    "H" + (w1 + 1) * cellSize + "V" + 0 +
    "H" + (w0 + 1) * cellSize + "Z";
}
</script>

  • 답변 # 1

    참고 :

    스케일링 기능이 단순하고 자동 축/레전드 생성에 필요하지 않은 경우, 기능 자체를 간단하게 작성할 수 있습니다. 따라서이 경우 다음과 같이 보일 수 있습니다.

    function scale(x) { 
      switch(true){ 
        case x<=3: return "blue"; 
        case x<=6: return "black"; 
        default:   return "green"; 
      } 
    }
    
    

    확장 기능은 "측정 된"값에서 표시된 값으로 만 매핑됩니다. 때로는 d3의보다 정교한 기능이 필요하지 않습니다.

  • 답변 # 2

    이 질문에 이미 받아 들여진 대답이 있지만, 미래 독자들을 위해이 질문을 쓰고 있습니다.

    OP에 설명 된 동작을 제공합니다 ("범위에 따라 색상을 설정해야합니다. 1&3은 파란색, 4&6은 검은 색, 6 이상은 빨간색입니다") 올바른 스케일은임계 값 스케일입니다.

    API에 따르면 :

    와이즈 비즈

    다음은 기본적인 데모입니다 :

    Threshold scales are similar to quantize scales, except they allow you to maparbitrary subsetsof the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set ofthreshold values. (emphases mine)

    var color = d3.scaleThreshold()
      .domain([4, 6])
      .range(["blue", "black", "red"]);
    
    console.log("color for 1 is :" + color(1))
    console.log("color for 2 is :" + color(2))
    console.log("color for 3 is :" + color(3))
    console.log("color for 4 is :" + color(4))
    console.log("color for 5 is :" + color(5))
    console.log("color for 6 is :" + color(6))
    console.log("color for 200 is :" + color(200))
    
    

    범위가 <script src="https://d3js.org/d3.v4.min.js"></script> 인 경우 임계 값 스케일에서  도메인에 n 가 있어야하는 값  가치. 위의 데모에서 :

    n - 1
    
    

    4보다 작은 것은 var color = d3.scaleThreshold() .domain([4, 6]) .range(["blue", "black", "red"]); 에 매핑됩니다 . 4와 6 사이는 blue 에 매핑됩니다 . 그리고 6 개 이상이 black 에 매핑됩니다 .

    이 스케일은 많은 임계 값을 빠르게 정의 할 수 있기 때문에 좋습니다. 예를 들면 다음과 같습니다.

    red
    
    

    또한 var color = d3.scaleThreshold() .domain([2, 5, 10, 20, 50, 80]) .range(["white", "yellow", "lime", "green", "blue", "orange", "red"]); 와 같은 편리한 방법이 있습니다 .

    PS : 요청한대로 데모의 스케일은 1에서 시작하지 않습니다. 이를 위해 invertExtent() 를 추가하십시오.  도메인의 첫 번째 값으로 사용하고 1보다 작은 값의 색상 (있는 경우)을 지정하여 범위에 새 값을 추가합니다.

    1

  • 이전 javascript - 컨테이너 중앙으로 DIV를 가로로 스크롤하는 방법은 무엇입니까?
  • 다음 java - AtomicReference를 휘발성 멤버로 교체하는 것이 언제 적절한가요?