I am working on D3 graphs to build some Interactive Dashboard. I can able to integrate graphs using static JSON. Now I want to get JSON from my running Server. My server needs some kind of basic Authorization.

I can able to get XML Response in Restclient after adding Basic Authentication Header. but in D3 it is not working.

My D3 is looking like this ...

d3.json("http://localhost:9001/***/rest/products", function(error, root) {
   var node = svg1.selectAll(".node")
  .data(bubble.nodes(classes(root))
  .filter(function(d) { return !d.children; }))
.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

   node.append("title")
     .text(function(d) { return d.className + ": " + format(d.value); });

   node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.packageName); });

   node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.className.substring(0, d.r / 3); });
 });

It will give 403 Forbidden error because Here I have not added Authentication header.

How can I add authentication header in D3.json so that I can access my resource in JSON form without any permission denied problem.

I am working on D3 graphs to build some Interactive Dashboard. I can able to integrate graphs using static JSON. Now I want to get JSON from my running Server. My server needs some kind of basic Authorization.

I can able to get XML Response in Restclient after adding Basic Authentication Header. but in D3 it is not working.

My D3 is looking like this ...

d3.json("http://localhost:9001/***/rest/products", function(error, root) {
   var node = svg1.selectAll(".node")
  .data(bubble.nodes(classes(root))
  .filter(function(d) { return !d.children; }))
.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

   node.append("title")
     .text(function(d) { return d.className + ": " + format(d.value); });

   node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.packageName); });

   node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.className.substring(0, d.r / 3); });
 });

It will give 403 Forbidden error because Here I have not added Authentication header.

How can I add authentication header in D3.json so that I can access my resource in JSON form without any permission denied problem.

• javascript
• jquery
• json
• rest
• d3.js

• You should be able to, at the very least, do d3.json("http://username:password@localhost:9001/..."). – kalley Commented Jun 2, 2014 at 12:46

2 Answers 2

You can add request headers with the #header method:

https://github./mbostock/d3/wiki/Requests#header

d3.json("http://localhost:9001/***/rest/products")
  .header("header-name", "header-value")
  .get(function(error, root) {
    // Your code here.
  })

This is updated as of d3.v5. From: https://beta.observablehq./@mbostock/fetch-with-basic-auth

fetch("https://httpbin/basic-auth/user/passwd", {
  headers: new Headers({
    "Authorization": `Basic ${base64.encode(`${login}:${password}`)}`
  }),
}).then(response => {
  if (!response.ok) throw new Error(response.status);
  return response.json();
})