Question

我想制作一个图表，其范围从2012年至2017年，事件发生的年份为这一年。我已经嵌套了数据。我无法生成条形图，并出现以下错误：错误：属性高度：预期长度“ NaN”。和错误：属性宽度：预期的长度，“ 15,430”。我尝试使用以前的帖子建议修复错误，但没有运气。任何与代码或建议的帮助将不胜感激。谢谢

js：

//set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
padding = 15;

// Fomat timeStamp to year
var dateFormat = d3.timeFormat("%Y");

//append the svg object to the body of the page
var svg = d3.select("#graph").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 + ")");

// Get the data
d3.json("https://moto.data.socrata.com/resource/jfwn-iu5d.json", 
function(data) {


// Objects
data.forEach(function(data) {
    data.incident_description = data.incident_description;
    data.incident_datetime = dateFormat(new 
Date(data.incident_datetime));
});

// Nest data by year of incident
var NestbyDate = d3.nest()
    .key(function(d) {
        return d.incident_datetime;
    })
    .key(function(d) {
        return d.incident_description + " " + d.incident_datetime;
    })
    .rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
            return (d.incident_description)
        });
    })
    .entries(data);
console.log(NestbyDate);


data.forEach(function(data) {
    data.incident_description = +data.incident_description;
    data.incident_datetime = +data.incident_datetime;
});

var x_domain = d3.extent(NestbyDate, function(d) {
    return d.key;
});
var y_domain = d3.extent(NestbyDate, function(d) {
    return d.values;
});

// set the ranges
var x = d3.scaleLinear().domain(x_domain).range([padding, width]);
var y = d3.scaleLinear().domain([0, 550]).range([height, 0]);

// Add the X Axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(6));

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

 //  Text label for the x-axis
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", height + margin.top + 9)
    .style("text-anchor", "center")
    .text("Day Date Format")
    .text("Year");

// Text Label for y-axis
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Number of crime incidents");

 // Draw the bars
 svg.selectAll(".rect")
    .data(NestbyDate)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return (d.key);
    })
    .attr("y", function(d) {
        return (d.values);
    })
    .attr("width", x.range())
    .attr("height", function(d) {
        return height - y(d.values);
    });
});

Answer 1

您做错了几件事。

var items2 = context.Database.SqlQuery<table_test>("SELECT * FROM table_test").ToArray(); var items3 = items2.Select(x => x.pKey).ToArray();应该是var x而不是线性比例。

因此，在这种情况下，x轴的域应如下所示：

d3.scaleBand()

，由于要嵌套数据，因此应将y attr更改为var x = d3.scaleBand().domain(NestbyDate.map(d => d.key))（您还忘记了在某些rect attr中添加d.values.length和y()）这些变化：

x()

我并没有非常仔细地查看数据，但是它应该使您有所了解至少需要更改

这是工作中的Plunker

错误：<rect>属性宽度：svg d3 v4

1 个答案: