1

我正在为我们拥有的一些数据创建一个条形图。现在我在更改 y 轴线和 y 轴标签的颜色时遇到问题。

我希望标签为黑色（且清晰），但线条为灰色点缀且不透明。但我就是应付不来。我已经尝试了很长一段时间，但我现在不得不在这里问，因为它必须很快完成，我已经没有时间了......

这是我的代码：

        data = jsonData.filter(function(d) { if(d.label !== "unknown") {return d} });

    var height = Object.keys(data).length*27;

    var margin = {top: 20, right: 20, bottom: 30, left: 20},
        widthWithoutMargin = width - margin.left - margin.right;

    var heightAxis = 2 ;

    var min = d3.min(data, function(d) { return +d.nb_v; });
    var max = d3.max(data, function(d) { return +d.nb_v; });

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

    var widthScale = d3.scale.linear()
                    .domain([0, max])
                    .range([0, width]);

    var gradient = canvas
        .append("linearGradient")
        .attr("y1", 0)
        .attr("y2", 0)
        .attr("x1", "0")
        .attr("x2", width)
        .attr("id", "gradientBar")
        .attr("gradientUnits", "userSpaceOnUse");

    gradient
        .append("stop")
        .attr("offset", "0")
        .attr("stop-color", colour0);

    gradient
        .append("stop")
        .attr("offset", "0.5")
        .attr("stop-color", colour1);

    var axis = d3.svg.axis()
        .tickSize(height)
        .scale(widthScale);

    canvas.selectAll("rect")
        .data(data.sort(function(a, b) { return d3.descending(a.nb_v, b.nb_v) } ))
        .enter()
            .append("rect")
                .attr("width", function(d) { return widthScale(d.nb_v); })
                .attr("height", 25)
                .attr("y", function(d, i) { return i * 27 })
                .attr("fill", "url(#gradientBar)" );

    canvas.selectAll("text")
        .data(data.sort(function(a, b) { return d3.descending(a.nb_v, b.nb_v) } ))
        .enter()
            .append("text") // Bar Labels
                .attr("y", function(d,i) { return i*27 + 18})
                .attr("x", width-25) // padding-right
                .attr("text-anchor", "end") // text-align: right
                .text(function(d) { return d.label + ": "+ d.nb_v });

    canvas.append("g")
        .attr("transform", "translate(0,"+heightAxis+")")
        .style("stroke-dasharray", ("3, 3"))
        .style("stroke", "#eee")
        .style("shape-rendering", "crispEdges")
        .call(axis);

这是我的 html 中仍然存在的内容：

    <style>
               path    { fill: none; }    // for another D3 thing I am working on
    .xV.axis   line    { stroke: black; }
    .xV.axis   path    { stroke: black; }
    .yV.axis   path    { stroke: black; }
    .yV.axis   line    { stroke: black; } // till here not relevant, I guess
    .axis path,
    .axis line {fill: none; stroke: "#eee"; stroke-width: 1; shape-rendering: crispEdges;}
</style>

所以如果我有这样的，输出看起来像这样： 带有灰色虚线和灰色文本的条形图

如果我删除

.style("stroke", "#eee")
.style("shape-rendering", "crispEdges")

从 canvas.append("g") 我得到了我想要的标签，但是轴消失了。

带有黑色文本但没有线条的条形图

最重要的是，当我想打印它时，它无论如何决定让它成为自己的东西：

打印版条形图

当然，删除前面提到的两种样式会导致打印输出与屏幕版本相同。没有线条，但标签清晰。

我仍在学习 D3js，但我必须尽快完成。你能帮我么？

更新：添加了完整的代码

索引-SO.html：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bar Graph</title>

<!--
<link href="css/smxcc.css" rel="stylesheet" type="text/css" />
-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="BarGraphs-SO.js"></script>

<script type="text/javascript">

</script>

<style>
    path    { fill: none; }
    .xVisits.axis   path    { stroke: black; shape-rendering: crispEdges; }
    .yVisits.axis   path    { stroke: black; shape-rendering: crispEdges; }
    .xVisits.axis   line    { stroke: black; shape-rendering: crispEdges; }
    .yVisits.axis   line    { stroke: black; shape-rendering: crispEdges; }


    .ticks line {
        stroke: "#eee";
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
    .axis line {
        stroke: "#eee";
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

</style>
</head>
<body>
<div id="head">
   <h1></h1>
</div>
<div id="columns">
    <ul id="column1" class="column">
    </ul>
    <ul id="column2" class="column">
    </ul>
    <ul id="column3" class="column">
    </ul>
</div>

<script type="text/javascript">
    var colour0     = "#a61c1c";
    var colour1     = "#FF0000";
    var windowWidth = $(window).width();
    var width = windowWidth-100;
    smxGetBar("Test", "barChart")
</script>
</body>
</html>

条形图-SO.js：

function smxGetBar(name, div) {

$('#column1').append('<li><div><h3>'+name+'</h3></div><div><div id="'+div+'"></div></div></li>');


d3.json("data-SO.json", function(data) {

console.log(data);

var height = Object.keys(data).length*27;

var margin = {top: 20, right: 20, bottom: 30, left: 20},
widthWithoutMargin = width - margin.left - margin.right;

var heightAxis = 2 ;

var min = d3.min(data, function(d) { return +d.nb_v; });
var max = d3.max(data, function(d) { return +d.nb_v; });

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

var widthScale = d3.scale.linear()
.domain([0, max])
.range([0, width]);

var gradient = canvas
.append("linearGradient")
.attr("y1", 0)
.attr("y2", 0)
.attr("x1", "0")
.attr("x2", width)
.attr("id", "gradientBar")
.attr("gradientUnits", "userSpaceOnUse");

gradient
.append("stop")
.attr("offset", "0")
.attr("stop-color", colour0);

gradient
.append("stop")
.attr("offset", "0.5")
.attr("stop-color", colour1);

var axis = d3.svg.axis()
.tickSize(height)
.scale(widthScale);

canvas.selectAll("rect")
.data(data.sort(function(a, b) { return d3.descending(a.nb_v, b.nb_v) } ))
.enter()
.append("rect")
.attr("width", function(d) { return widthScale(d.nb_v); })
.attr("height", 25)
.attr("y", function(d, i) { return i * 27 })
.attr("fill", "url(#gradientBar)" );

canvas.selectAll("text")
.data(data.sort(function(a, b) { return d3.descending(a.nb_v, b.nb_v) } ))
.enter()
.append("text") // Bar Labels
.attr("y", function(d,i) { return i*27 + 18})
.attr("x", width-25) // padding-right
.attr("text-anchor", "end") // text-align: right
.text(function(d) { return d.label + ": "+ d.nb_v; });

canvas.append("g")
.attr("transform", "translate(0,"+heightAxis+")")
.call(axis);
})

}

数据-SO.json：

[
{
"label": "0h",
"nb_v": 137
},
{
"label": "1h",
"nb_v": 70
},
{
"label": "2h",
"nb_v": 31
},
{
"label": "3h",
"nb_v": 20
},
{
"label": "4h",
"nb_v": 19
},
{
"label": "5h",
"nb_v": 28
},
{
"label": "6h",
"nb_v": 89
},
{
"label": "7h",
"nb_v": 350
},
{
"label": "8h",
"nb_v": 745
},
{
"label": "9h",
"nb_v": 951
}
]
4

1 回答 1

1

您可以在 CSS 中完成所有操作并.style从代码中删除这些调用：

.tick line {
  stroke: #eee;
  stroke-width: 1;
  shape-rendering: crispEdges;
  stroke-dasharray: 5,5;
}

完整的例子在这里。

于 2013-11-12T19:42:35.423 回答