Question

我正在寻找创建在单个图表中使用多种颜色的条形图。当我使用v4时，我一直在寻找使用d3.scaleBand（）。range的方法，但是这似乎不起作用，我有7个不同的小节，我想将所有标签标记为灰色，最后一个除外。最后一个应该是蓝色/深绿色。

如果在style.css中有办法做到这一点，那很好，但是，如果只能在main.js中完成解决方案，那也很好。

main.js

var margin = { left:80, right:20, top:50, bottom:100 };

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var g = d3.select("#chart-area")
    .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 + ")");

// Define colour pallet
var color = d3.scaleBand().range(["#aeb3b7", "#aeb3b7", "#aeb3b7", "#aeb3b7",
                "#aeb3b7", "#3a6587", "#3a6587"]);

// X Label
g.append("text")
    .attr("y", height + 50)
    .attr("x", width / 2)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("fill", "#aeb3b7")  // This changes the Label text attr() or style()
    .text("Month");

// Y Label
g.append("text")
    .attr("y", -60)
    .attr("x", -(height / 2))
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .attr("fill", "#aeb3b7")  // This changes the Label text attr() or style()
    .text("Revenue");

d3.json("data/revenues.json").then(function(data){
    // console.log(data);


    // Clean data
    data.forEach(function(d) {
        d.revenue = +d.revenue;
    });

    // X Scale
    var x = d3.scaleBand()
        .domain(data.map(function(d){ return d.month }))
        .range([0, width])
        .padding(0.2);

    // Y Scale
    var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return d.revenue })])
        .range([height, 0]);

    // X Axis
    var xAxisCall = d3.axisBottom(x);
    g.append("g")
        .attr("class", "axisEx")
        .attr("transform", "translate(0," + height +")")
        .call(xAxisCall);

    // Y Axis
    var yAxisCall = d3.axisLeft(y)
        .tickFormat(function(d){ return "$" + d; });
    g.append("g")
        .attr("class", "axisWhy")
        .call(yAxisCall);



    // Bars
    var rects = g.selectAll("rect")
        .data(data)

    rects.enter()
        .append("rect")
            .attr("y", function(d){ return y(d.revenue); })
            .attr("x", function(d){ return x(d.month) })
            .attr("height", function(d){ return height - y(d.revenue); })
            .attr("width", x.bandwidth)
            .attr("fill", function(d, i) {
                return color(i);
            })
            //.attr("fill", "#3a6587"); // This changes the column colour to a distinct colour
})

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <title>Star Break Coffee</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Custom styling -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container">
            <a class="navbar-brand" href="#"><img id="logo" src="img/logo.png"></a>      
        </div>
    </nav>

    <!-- Bootstrap grid setup -->
    <div class="container">
        <div class="row">
            <div id="chart-area"></div>
        </div>
    </div>

<!-- External JS libraries -->
<script src="js/d3.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>

</body>
</html>

style.css

#chart-area svg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#logo {
    height:50px;
}

.navbar-brand {
    height: 60px;
    padding: 5px 0px;
}

/*  Line is used to set the vertical 
portion of the graph should be grey 
to improve legibility */

.axisWhy line{
  stroke:  #aeb3b7; 
}

/*  path is used to set the axis ticks 
should be grey to improve legibility */

.axisWhy path{
  stroke: #aeb3b7;
}

/*  path is used to set the axis text 
should be black to contrast grey axis 
text */

.axisWhy text{
  fill: black;
} 


/*  Line is used to set the vertical 
portion of the graph should be grey 
to improve legibility */

.axisEx line{
  stroke:  #aeb3b7; 
}

/*  path is used to set the axis ticks 
should be grey to improve legibility */

.axisEx path{
  stroke: #aeb3b7;
}

/*  path is used to set the axis text 
should be black to contrast grey axis 
text */

.axisEx text{
  fill: black;
} 

/* Can be used to set the fill colour 
for a bar chart, however the colour is
used for all bars 
    rect {
    fill: #3a6587;
}
*/

revenues.json

[
    {
        "month": "January",
        "revenue": "13432",
        "profit": "8342"
    },
    {
        "month": "February",
        "revenue": "19342",
        "profit": "10342"
    },
    {
        "month": "March",
        "revenue": "17443",
        "profit": "15423"
    },
    {
        "month": "April",
        "revenue": "26342",
        "profit": "18432"
    },
    {
        "month": "May",
        "revenue": "34213",
        "profit": "29434"
    },
    {
        "month": "June",
        "revenue": "50321",
        "profit": "45343"
    },
    {
        "month": "July",
        "revenue": "54273",
        "profit": "47452"
    }
]

谢谢乔纳森

Answer 1

您需要的只是

var color = ["#aeb3b7", "#aeb3b7", "#aeb3b7", "#aeb3b7",
                    "#aeb3b7", "#3a6587", "#3a6587"];

然后

.attr("fill", function(d, i) {
                return color[i];
            })

d3v4如何将条形图设置为不同的颜色

1 个答案: