Learning D3.js from scratch need not be hard. However, many people hardly take the time to understand how their D3 dataviz actually works. You will find many people simply trying to figure it out by tweaking something here and tapping there until something works.
Unfortunately, they are left with a visualization which works but they cannot explain how. Instead of doing it the happy-g0-lucky way, why not seek to understand it?

What is D3.js?
It is a JavaScript library which manipulates data-based documents. It uses HTML, CSS and SVG activate data. D3 lays its emphasis on web standards to bring out the full potential of the modern browser while avoiding limiting you to a proprietary framework.
It also combines the best visualization components as well as an approach driven by data for to manipulate Document Object Models (DOM).
D3.js aids in attaching data to DOM elements. The data is then showcased via CSS3, SVG or HTML. Once this is done, the data is made interactive via the D3.js transformations which are driven by data.
The following concepts should help you learn and understand D3.js. Soon you will be working on projects without second-guessing yourself.

 Method Chaining
With D3.js, your goal is to create, update or delete SVG based on user interactivity or data values/updates. Method chaining helps to reduce typing and makes your code look better organized and legible.

How Selections and Data Join Work
A block of code introducing a new subject usually begins with ‘select’. This statement is steeped in ambiguity as it points to something that is not yet in existence. Picture what is happening with regard to SVG for a better grasp of such a concept.
To bring about new visualizations, data that is joined to corresponding scalable vector graphics is required. SVG has no properties as it is not joined to any data.  

 Scaling, Domain, and Range
     Scaling: This is a foundational concept that involves the creation and application of a scale. This is essentially translating data values to fit the screen of your computer. Each scale requires a type of scale, domain, and range.
    Range: this is where you project your data on your PC screen.  You must indicate the screen height and width of your computer or device that you are using in order to access the page.

 The Document Object Model (DOM)
Data-driven documents are organized through the DOM which gives a standard way to gain access to webpage elements through various programming languages such s CSS and HTML.

Responsive Design and UX Principles with CSS and D3.js
Handling responsive design, conditional formatting, and user interactivity is done in ways such as:

• Adding style information directly into the method chain
• Adding style information indirectly with CSS properties          

CSS is more flexible than SVG because while the former supports a range of for many devices and layouts, the latter moves and sizes vector graphics for complex drawings. Therefore, you might find the two clashing because they attempt to give different solutions to different problems.

Conclusion
There is a lot more than you need to learn. However, these concepts ought to help speed up your learning as you endeavor to proceed to more complex topics related to D3.js. the trick is to ensure that you are not overwhelmed by too much material.